代码之家  ›  专栏  ›  技术社区  ›  Kadir Üretir

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

  •  0
  • Kadir Üretir  · 技术社区  · 2 周前

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

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

    1 回复  |  直到 2 周前
        1
  •  1
  •   Neeraj Lagwankar    2 周前

    这是因为 hasMorePage 即使将其设置为false,也尚未变为false,并且将在下一个渲染周期中变为false。

    您可能可以将这个if条件移动到另一个 useEffect 看看这是否有帮助

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