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

Question

我正在使用 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");
  };

请纠正我的错误。谢谢你

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