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

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

I am facing a problem in Pagination using states in React JS

api

pagination

button

reactjs