![](/img/trans.png)
[英]React Hook useEffect has a missing dependency with useEffect
[英]React Hook useEffect has a missing dependency array
我正在使用 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);
});
}, []);
}
编辑:再看一遍,您收到该错误的原因是因为您在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
在函数的引用,并应考虑除了依赖阵列。 但是在这种情况下,您(希望)知道您在做什么以及正在发生什么并且可以忽略警告。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.