React Hook useEffect缺少依赖项数组

时间:2019-06-27 18:15:35

标签: javascript reactjs react-hooks

我正在使用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);
      });
  }, []);
}

2 个答案:

答案 0 :(得分:2)

编辑:再次查看该错误,是因为您的channels首次运行时,您正在关闭useEffect()的初始值。因此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);
    }
  }, []);
}

如果仍然收到警告,则可能是因为firebasesetChannels是函数中的引用,应考虑将其添加到依赖项数组中。但是在这种情况下,您(希望)知道您在做什么和正在做什么,可以忽略警告。

答案 1 :(得分:-1)

如何在deps []中放置频道?