React 分页和 useEffect 依赖逻辑[重复]

Question

基本上，我有一个函数来获取过滤后的数据，那就是 fetchDataFromMain 函数。

useEffect(() => {
  setHasMorePage(true);
  setPage(1);
  setFilteredEvents([]);
}, [selectedDate, selectedCategory, selectedProvince]);

useEffect(() => {
  if (page === 4) {
    setHasMorePage(false);
  } else {
    setHasMorePage(true)
  }

  if ((page <= 4 && hasMorePage)) {
    console.log("useeffect worked", page)
    fetchDataFromMain();
  } 
}, [page, selectedDate, selectedCategory, selectedProvince])

我已完成全部 4 页。每页有20条数据。当页面增加时，数据也会在后端合成20*2并发送给客户端。但是，每当我通过向下滚动增加页面并更改过滤器时，useEffect 都会工作两次，并向后端发送两个获取请求，因为条件中的页面我检查页面是否较小且等于 4，并且即使我将 hasMorePage 设置为 false，它仍然会获取请求。

我的问题是，我不想两次获取数据，但我找不到解决方案。有谁知道我该如何解决这个问题？

Answer 1

这是因为即使您将其设置为 false，

hasMorePage

也尚未变为 false，并且将在下一个渲染周期中变为 false。

您可以将此 if 条件移至另一个

useEffect

，看看是否有帮助

if ((page <= 4 && hasMorePage)) {
  console.log("useeffect worked", page)
  fetchDataFromMain();
}