我在使用 React JS 中的状态时遇到分页问题

Posted 2023-02-22

【中文标题】我在使用 React JS 中的状态时遇到分页问题

【英文标题】：I am facing a problem in Pagination using states in React JS

【发布时间】：2022-01-03 17:57:50

【问题描述】：

我正在使用 useEffect() 来呈现文章 API，并且在一页上仅显示 26 篇文章中的 20 篇。我正在尝试将分页概念应用于它，但它没有给我任何错误并且它也不起作用。 nextPageHandler() 负责在下一页显示剩余的 6 篇文章。

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");
  ;

请纠正我的错误。谢谢你

【参考方案1】：

您需要在 useEffect 依赖数组中添加页面状态。触发api调用

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]);

你也不需要再次从函数调用 api

const nextPageHandler =  () => 

    setPage(page + 1);
    console.log("next");
  ;

  const prevPageHandler =  () => 
    setPage(page - 1);
    console.log("previous");
  ;

【讨论】：

试过了。有用！谢谢

如果它有助于将其标记为已回答并竖起大拇指将不胜感激