如何避免 useEffect 中的无限循环？

Question

我在一个名为 TaskComponent 的功能组件中工作，其中我有这个 useEffect：

useEffect(() => {
    const getFilterTasks = () => {
      onSnapshot(q, (QuerySnapshot) => {
        QuerySnapshot.forEach((doc) => {
          filteredTasks.push(doc.data())
          console.log(filteredTasks);
        })
        setTasks(filteredTasks);
        })
      }
    
    getFilterTasks();

}, [])
   
  

在我的组件中，我有一个 Flatlist，其中 tasks-state 是我的 Flatlist 数据，所以我想在每次任务更改时渲染我的组件，并且每次我从 TaskComponent 导航到 CategoryComponent 并再次返回到 TaskComponent 时它都会更改，因为过滤的任务是根据i select的类别不同，概念如下三张图所示：

显然，将“任务”添加到我的依赖数组是行不通的，因为它会创建无限循环，因为我也在 useEffect 中调用 setTasks。

所以我不确定我是否可以解决这个问题，是否有解决这个问题的棘手方法，我是否必须重新渲染我的组件或完全不同的东西？

Answer 1

编辑：问题现在解决了，我只是在依赖数组中添加了 item.id。

这就是我使用刷新/设置刷新 state 的方式：

  useEffect(() => {
    const getFilterTasks = async() => {
    const q = query(collection(db, 'allTasks'), where('userID', '==', userID), where('categoryID', '==', item.id))
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
      filteredTasks.push(doc.data())
    })
    setTasks(filteredTasks)
    }

    getFilterTasks();

    setRefresh(false)
    console.log(refresh)

  }, [refresh])


  const handleRefresh = () => {
    setRefresh(true);
  }

我添加了： const [refresh, setRefresh] = useState(false);

然后我有一个连接到 handleRefresh 的按钮。

这行得通，但这不是一个很好的方法。

Answer 2

首先你要知道useEffect结合了componentDidMount、ComponentDidUpdate和componentWillUnmount。

因此，如果您只需要它在组件呈现时工作一次（ commponentDidMount Approach ）：

• 如果您要从 API 获取数据，则推荐使用

• 您的依赖项数组应该为空

 useEffect( () => { set Your Logic here }, [])

如果您需要继续观察某些变量/状态的变化（ ComponentDidUpdate Approach ）：

• 推荐如果你想根据一个可能在运行时改变的变量来更新你的组件的某些部分
• 在依赖项数组中传递要监视的变量

 useEffect(()=>{ set Your Logic here },[yourDependencies])

最后，如果您想在离开组件时运行清理 function以防止应用程序中的 memory 泄漏和不需要的行为（ componentWillUnmount 方法）：

 useEffect(()=>{ set Your Logic here return () => { cleanup } },[])