Comparto el siguiente ejemplo
Puedes adaptarlo a tu proyecto ( agregar useQuery), en general se debe usar una funcion de retro-propagación (sale del componente y regresa causando un re-render), aqui la función tiene el nombre de setPageNumber
.
Notese como se declara y sale desde el provider
para poder ser consumida por useContext
en tu Child
component TaskFotos
, desde ahi regresa y causa un re-render al atcualizar el estado de page
:
import React, { useState, useEffect, createContext, useContext } from "react";
import {
BrowserRouter as Router,
Routes,
Route,
Link,
useNavigate
} from "react-router-dom";
const DataContext = createContext(null);
function ItemList() {
const { data, setPageNumber, page, totalPages } = useContext(DataContext);
console.log(data);
return (
<div>
<h2>Items</h2>
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
<div>
<button disabled={page === 1} onClick={() => setPageNumber(page - 1)}>
Previous
</button>
<button
disabled={page === totalPages}
onClick={() => setPageNumber(page + 1)}
>
Next
</button>
</div>
</div>
);
}
function App() {
const [data, setData] = useState([]);
const [page, setPage] = useState(1);
const [totalPages, setTotalPages] = useState(0);
useEffect(() => {
fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}`)
.then((response) => {
setTotalPages(Number(response.headers.get("X-Total-Count")));
return response.json();
})
.then((data) => setData(data))
.catch((error) => console.log(error));
}, [page]);
const setPageNumber = (pageNumber) => {
setPage(pageNumber);
};
return (
<DataContext.Provider value={{ data, setPageNumber, page, totalPages }}>
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/items">Items</Link>
</nav>
<Routes>
<Route path="/" element={<h1>Home</h1>} />
<Route path="/items" element={<ItemList />} />
</Routes>
</div>
</DataContext.Provider>
);
}
function Main() {
return (
<Router>
<App />
</Router>
);
}
export default Main;