不能在 API 请求中包含 React 的分页 [关闭]

Question

我现在尝试了几个小时在来自黑客新闻的克隆中实现一个简单的分页。
此代码正在运行（没有分页）：

import React, { useState, useEffect } from 'react';
import Article from "./Article.js";
import Header from "./Header.js";
import './App.css';

function App() {
  const [articles, setArticles] = useState([]);
  const [query, setQuery] = useState("react");
  const [loading, setLoading] = useState(false);
 
  const fetchData = (setArticles) => {
    setLoading(true)
    let endpoint = `https://hn.algolia.com/api/v1/search?query=${query}`
    fetch(endpoint)
    .then((response) => response.json())
    .then((response) => {
        setLoading(false);
        const newArticles = response.hits.map((result) => ({
          text: result.title,
          url: result.url,
          points: result.points,
          comments: result.num_comments,
          author: result.author,
          created: result.created_at_i,
          isCompleted: false
        }))
      .sort((a, b) => (a.num_comments > b.num_comments ? -1:1));
      setArticles(newArticles);
      setQuery(response.query);
    })
    // Error handling
    .catch(error => {
      setLoading(false);
      alert(error);
    });
  }

  useEffect(() => {
      fetchData(setArticles);
      // Automatic data refresh after 5 minutes
      const interval = setInterval(() => {
        fetchData(setArticles);
      }, 300000);
      return () => clearInterval(interval);
  }, [query]);

   return (
    <div className="default light">
     
      <div className="container">
        <Header setQuery={setQuery} />
        {/*Display spinner if news are loading*/}
        <div className="loader-container" style={loading ? {display:"block"} : {display:"none"}}> 
          <div className="loader"></div>
        </div>
        <section className="SearchResults" style={loading ? {display:"none"} : {display:"block"}}>
          <div className="SearchResults_container">
            {/*Check if search gave results*/}
            <div className="search-term">{articles.length ? `${articles.length} News about "${query}": ` : `No news found for "${query}"`}</div>
            {articles.map((article, index) => (
              <Article
                key={index}
                index={index}
                article={article}
              />
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}

export default App;

对于分页，我尝试按照本教程的说明进行操作：
https://medium.com/how-to-react/create-pagination-in-react-js-using-react-hooks-c3c582ff5a96

但是即使我接管了完整的代码并且只交换了源代码的链接，它也不再起作用了。

有人有想法吗？

非常感谢和问候
八字

Answer 1

import React, { useState, useEffect } from 'react';
import Article from "./Article.js";
import Header from "./Header.js";
import './App.css';

function App() {
  const [articles, setArticles] = useState([]);
  const [query, setQuery] = useState("react");
  const [loading, setLoading] = useState(false);
  const [pageCount, setPageCount] = useState(50); // api support up to a maximum of 50 page only
  const [currentPage, setCurrentPage] = useState(0);

  const fetchData = () => {
    setLoading(true);
    let endpoint = `https://hn.algolia.com/api/v1/search?query=${query}&page=${currentPage}`;
    fetch(endpoint)
    .then((response) => response.json())
    .then((response) => {
        setLoading(false);
        const newArticles = response.hits.map((result) => ({
          text: result.title,
          url: result.url,
          points: result.points,
          comments: result.num_comments,
          author: result.author,
          created: result.created_at_i,
          isCompleted: false
        }))
      .sort((a, b) => (a.num_comments > b.num_comments ? -1:1));
      setArticles(newArticles);
      setQuery(response.query);
      setPageCount(response.nbPages);
    })
    // Error handling
    .catch(error => {
      setLoading(false);
      alert(error);
    });
  }

  const pageChange = (data) => {
    setCurrentPage(data.selected);
    fetchData();
  }

  useEffect(() => {
      fetchData();
      // Automatic data refresh after 5 minutes
      const interval = setInterval(() => {
        fetchData();
      }, 300000);
      return () => clearInterval(interval);
  }, [query]);

   return (
    <div className="default light">
      <div className="container">
        <Header setQuery={setQuery} />
        {/*Display spinner if news are loading*/}
        <div className="loader-container" style={loading ? {display:"block"} : {display:"none"}}> 
          <div className="loader"></div>
        </div>
        <section className="SearchResults" style={loading ? {display:"none"} : {display:"block"}}>
          <div className="SearchResults_container">
            {/*Check if search gave results*/}
            <div className="search-term">{articles.length ? `${articles.length} News about "${query}": ` : `No news found for "${query}"`}</div>
            {articles.map((article, index) => (
              <Article
                key={index}
                index={index}
                article={article}
              />
            ))}
          </div>
        </section>
      </div>

       <ReactPaginate
         pageCount={pageCount}
         marginPagesDisplayed={2}
         pageRangeDisplayed={5}
         onPageChange={pageChange}
       />

    </div>
  );
}

export default App;

这个想法是让onPageChange回调函数在分页索引发生变化时将当前页面设置为状态，并且您还需要在API调用中添加page参数才能使分页工作。

此外，您希望在每次 API 调用后立即设置 setPageCount，以防页面总数发生变化。