React Hook useEffect 缺少依賴數組

Question

我正在使用 firebase 數據庫來存儲數據，我正在使用 useEffect 鈎子掛載數據。 但它警告我缺少依賴數組。

每當我傳遞依賴項時，它就會進入無限循環

const Channels = props => {
  const [channels, setChannels] = useState([]);
  const [firstLoad, setFirstLoad] = useState(false);

  useEffect(() => {
    let loadedChannels = [];

    firebase
      .database()
      .ref("channels")
      .on("child_added", snap => {
        loadedChannels.push(snap.val());
        setChannels(channels.concat(loadedChannels));
        setFirstLoad(true);
      });
  }, []);
}

Answer 1

編輯：再看一遍，您收到該錯誤的原因是因為您在useEffect()第一次運行時關閉了channels的初始值。 所以channels真的應該在你的依賴數組中，因為當那個值發生變化時，你會希望新值從那時起反映在狀態更新中。 您正在嘗試使用loadedChannels數組來解決它，這是一種奇怪的反模式。

我實際上建議您將其調整為這樣的內容。 請注意setChannels現在是如何使用函數調用的，該函數將channels的實際最新值作為參數，並允許您更新該值，而不會因閉包而過時。

另請注意useEffect()函數如何返回另一個函數，該函數在組件卸載時移除 Firebase 事件偵聽器！

const Channels = props => {
  const [channels, setChannels] = useState([]);
  const [firstLoad, setFirstLoad] = useState(false);

  useEffect(() => {
    function onFirebaseUpdate(snap) {
      setChannels((previousChannelsValue) => {
        return previousChannelsValue.concat(snap.val())
      });
      setFirstLoad(true);
    }

    firebase
      .database()
      .ref("channels")
      .on("child_added", onFirebaseUpdate);

    // You'll want to remove this listener when the component unmounts...
    return function() {
      firebase
        .database()
        .ref("channels")
        .off("child_added", onFirebaseUpdate);
    }
  }, []);
}

如果你仍然會得到一個警告，這可能是因為無論是firebase或setChannels在函數的引用，並應考慮除了依賴陣列。 但是在這種情況下，您（希望）知道您在做什么以及正在發生什么並且可以忽略警告。