反应分页和使用效果依赖逻辑

基本上,我有一个函数来获取过滤后的数据,那就是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,它也会获取请求。

我的问题是,我不想两次提取数据,但我找不到解决方案。有人知道我该如何解决这个问题吗?