Skip to main content
se añadieron 66 caracteres en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

Notese como se declara y salesale desde el provider para poder ser consumida por useContext en tu Child component TaskFotos, desde ahi regresaahí regresa y causa un re-render al atcualizaractualizar el estado de page y se obtienen los datos de la nueva página para ser renderizados :

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:

Notese como se declara y sale desde el provider para poder ser consumida por useContext en tu Child component TaskFotos, desde ahí regresa y causa un re-render al actualizar el estado de page y se obtienen los datos de la nueva página para ser renderizados :

Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

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;