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 数组绕过它，这是一个奇怪的 anti-pattern.

我实际上建议您将其调整为类似这样的内容。请注意现在如何使用函数调用 setChannels，该函数将 channels 的 实际最新值作为参数，并允许您更新该值而无需由于关闭已过时。

另请注意 useEffect() 函数 returns 另一个 函数如何在组件卸载时删除 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 是函数中的引用，应考虑添加到依赖项数组中。但在这种情况下，您（希望）知道自己在做什么以及发生了什么，可以忽略警告。

React Hook useEffect 缺少依赖数组

React Hook useEffect has a missing dependency array

javascript

reactjs

react-hooks