reactjs 在React中无限滚动并使用新获取的数据进行更新

pgky5nke 于 2022-12-03 发布在 React

关注(0)|答案(2)|浏览(435)

我正在尝试渲染一个无限滚动组件，并在滚动到它的末尾时用新获取的新闻更新它的数据。它在第一次滚动时工作，但在那之后卡在Loading...。我不明白发生了什么事，使它在第一次滚动后停止获取。
应该获取新数据的代码如下所示：

const [latestNews, setLatestNews] = useState<any[]>([]);
  const [page, setPage] = useState<number>(1);

         const getLatestNews = async (page: number) => {
        
            let url = `https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=${API_KEY}&page=${page}`;
            
            const response = await fetch(url);
            const data = await response.json();
            setLatestNews(data.response.docs);
            setPage(page + 1);
          }

我的无限滚动组件看起来像这样

<InfiniteScroll dataLength={latestNews.length} next={() => getLatestNews(page)} hasMore={true} loader={<h4>Loading...</h4>} scrollableTarget="scrollableDiv">
              {
                latestNews.map((article, index) => (
                  <div className="latest-news-article flex flex-col gap-3 mb-4" key={index}>
                    <p className="latest-news-article-date">
                      {article.pub_date.slice(11, 16)}
                    </p>
                    <h1>
                      {article.headline.main}
                    </h1>
                  </div>
                ))
              }
            </InfiniteScroll>

reactjs

来源：https://stackoverflow.com/questions/74647937/infinite-scrolling-and-updating-it-with-newly-fetched-data-in-react

2条答案

按热度按时间

2jcobegt1#

我想我现在找到解决办法了。
用我的话来说，滚动速度“太快了”，它很快就更新了状态，比API接受请求的速度快得多，我得到的是429 Too Many Requests。解决方案：

const getLatestNews = async () => {
    setTimeout(async () => {
      const response = await fetch(`https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=${API_KEY}&page=${page}`);
      const data = await response.json();
      setLatestNews((prev) => [...prev, ...data.response.docs]);
      setPage(page + 1);
    }, 5000);

  }

我把setTimeout增加到5000ms，这样API请求就不会立即发送，状态也会很好地改变，它也会相应地呈现新的新闻。

赞(0）回复(0）举报 2022-12-03

cclgggtu2#

你的解决方案是可行的，但还有另一个更符合逻辑的解决方案。
您可以使用useRef添加一个ref，并在发送请求时更改其值，以防止同时发送另一个请求：

const sendRequestRef = useRef(true);

const getLatestNews = async () => {
  if(sendRequestRef.current === true) {
    sendRequestRef.current = false;
    const response = await fetch(`https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=${API_KEY}&page=${page}`);
    const data = await response.json();
    setLatestNews((prev) => [...prev, ...data.response.docs]);
    setPage(page + 1);
    sendRequestRef.current = true;
  }
}

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs 在React中无限滚动并使用新获取的数据进行更新

2条答案

相关问题

热门标签

最新问答