如何避免 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 } },[])