1

Necesito pasarle un parametro que va a ser el pageNumber desde el componente al context para que el pageNumber se pueda usar en el context para que en el context pueda hacer el fetch a la API con el correspondiente numero que le paso el componente

Codigo del Context:

import { useQuery } from '@tanstack/react-query';
export const PhotosContext = createContext()

function AppContextProvider(props) {
    const pageNumber = 1

    const {isLoading, data:fotos, isError, error} = useQuery({queryKey: ["fotos"], queryFn: async () => {
        return await fetch(`http://127.0.0.1:5000/api-content/images/${pageNumber}`)
        .then((response) => response.json())
        }, 
        staleTime: 300 * 1000 // cache data for 300 seconds
        });


    return (
        <PhotosContext.Provider value={{
            fotos,
            isLoading,
            }}>
            {props.children}
        </PhotosContext.Provider>
    );
}

export default AppContextProvider;

y este es el codigo del componente:

import Products from './products';
import { useParams } from 'react-router-dom';
import Navbar from './Views/Navbar';
import Spinner from './Views/Sppiner';
import { PhotosContext } from '../context/Appcontext';


function TaskFotos(){
    const {pageNumber} = useParams();
    const {fotos,isLoading} = useContext(PhotosContext)

    if (isLoading) return <Spinner />   
    return(
    <>
    <Navbar/>
    <div className="bg-white">
        <div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-6xl lg:px-4">
            <h2 className="text-3xl text-center font-bold tracking-tight text-gray-900">Products</h2>
            <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-24">
            {fotos?.map((foto, index) => (
                    <Products id={foto?.id} image={foto?.image} name={foto?.name} price={foto?.price} key={index}/>
            ))} 
            </div>
        </div>
    </div>
    </>
    );
}

export default TaskFotos;

En la documentacion no aparece nada(por lo que vi) y GPT me tiro cualquier cosa.

Alguna sugerencia? desde ya muchas gracias.

6
  • ¿En que momento piensas cambiar el pageNumber? veo que estas mostrando una lista de productos que vienen en la pagina 1.
    – g.4
    Commented el 18 abr. 2023 a las 2:42
  • Si, esta envuelta la app con el provider Commented el 18 abr. 2023 a las 15:51
  • Esa es la pregunta, no se como pasarle el pageNumber cuando cambie la pagina Commented el 18 abr. 2023 a las 15:52
  • Bien entonces muestras la página con los elementos de página 1 y el usuario debe de alguna forma pasar a la siguiente página, ¿Este cambio de página lo vas a hacer con un boton, infinite scroll cual es la idea a nivel UI? poque parece que la pagina viende desde useParams, si pudieras mostrar la implementacion de esa ruta
    – g.4
    Commented el 18 abr. 2023 a las 17:51
  • La idea a nivel UI es que si el usuario quiere cambiar de pagina en la parte baja tiene unos botones para cambiar a la pagina 1,2,3 o 4 eso mediante un <a> que redirije a la pagina con su numero correspondiente por ejemplo: products/2/ que eso lo toma el useparams Commented el 18 abr. 2023 a las 18:51

1 respuesta 1

0

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 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 :

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;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.