es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Estoy enfrentando un problema con la paginación utilizando estados en React JS.

04 Jun, 2023 Programación

Estoy usando useEffect() para renderizar una API de artículos y en una página solo se muestran 20 de 26 artículos. Estoy intentando aplicar el concepto de paginación pero no me está dando ningún error y tampoco está funcionando. nextPageHandler() es responsable de mostrar los 6 artículos restantes en la siguiente página.

let articles = [];

const [article, setArticle] = useState(articles);
const [page, setPage] = useState(1);




useEffect(async () => {
    let url =
      `https://newsapi.org/v2/top-headlines?q=house&from=2021-10-25&sortBy=publishedAt&apiKey=abc&page=${page}`;
    let data = await fetch(url);
    let parsedData = await data.json();
    setArticle(parsedData.articles);
  }, []);



  const nextPageHandler = async () => {
    let url = `https://newsapi.org/v2/top-headlines?q=house&from=2021-10-25&sortBy=publishedAt&apiKey=abc&page=${setPage(page+1)}`;
    let data = await fetch(url);
    let parsedData = await data.json();
    setArticle(parsedData.articles);
    setPage(page + 1);
    console.log("next");
  };

  const prevPageHandler = async () => {
    let url = `https://newsapi.org/v2/top-headlines?q=house&from=2021-10-25&sortBy=publishedAt&apiKey=abc&page=${setPage(
      page - 1
    )}`;
    let data = await fetch(url);
    let parsedData = await data.json();
    setArticle(parsedData.articles);
    setPage(page - 1);
    console.log("previous");
  };

Por favor corríjame si me equivoco en algo. Gracias

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Hay algunos lugares en su código donde puede mejorar:

    1. En sus funciones nextPageHandler() y prevPageHandler(), está llamando a setPage() dentro de la plantilla literal para la cadena URL. En su lugar, debe llamar a setPage() por separado y pasar el número de página actualizado como una variable a la cadena URL. Por ejemplo:
    const nextPageHandler = async () => {
  setPage(page + 1); // mover esta línea al principio
  let url = `https://newsapi.org/v2/top-headlines?q=house&from=2021-10-25&sortBy=publishedAt&apiKey=abc&page=${page + 1}`; // pasar el número de página actualizado como variable
  // resto de su código
};
    1. No está utilizando la variable de estado page en su matriz de dependencia useEffect(). Esto significa que su componente solo se renderizará una vez y no se volverá a renderizar cuando cambie el número de página. Para solucionar esto, agregue page a la matriz de dependencia:
    useEffect(async () => {
  let url = `https://newsapi.org/v2/top-headlines?q=house&from=2021-10-25&sortBy=publishedAt&apiKey=abc&page=${page}`;
  let data = await fetch(url);
  let parsedData = await data.json();
  setArticle(parsedData.articles);
}, [page]); // agregar page a la matriz de dependencia
    1. Está inicializando su variable articles como una matriz vacía, pero no la está utilizando en ninguna otra parte de su código. Puede eliminar esta línea:
    let articles = []; // eliminar esta línea
const [article, setArticle] = useState(articles);

    Con estos cambios, su paginación debería funcionar como se espera.

Comments are closed.