如何在useEffect中更新React元件的依賴項，而不會建立無限循環

Question

我有一個React元件，我需要等待儲存值（成員）更新，然後根據條件刪除一個成員，然後再設定儲存值。然而，這顯然會創建一個循環。

useEffect(() => {
    if(members.length > 0) {
        setMembers(members.filter((item) => item.name != 'Bob'));
    }

}, [members]);

有什麼好的方法可以解決這個問題嗎？根據我的應用程式設置，我真的需要在這個組件中這樣做。

Answer 1

您可以嘗試使用更新器狀態 const [update, setUpdate] = useState(false)，並將 update 作為依賴陣列。當成員清單更新時，使用 setUpdate(!update)。