React Hook使用效应缺少依赖关系数组

Question

我正在使用firebase数据库存储数据，我正在使用使用效果挂钩安装数据。但这给了我警告缺少依赖阵列的警告。

每当我通过依赖项时，它都会进入无限环路

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是该功能中的引用，应考虑在依赖项数组中添加。但是在这种情况下，您(希望(知道自己在做什么，正在发生什么，并且可以忽略警告。