[英]React Hook useEffect has a missing dependency array
I'm using firebase database to store the data and I am mounting the data using the useEffect hook.我正在使用 firebase 数据库来存储数据,我正在使用 useEffect 钩子挂载数据。 But it gives me warning of missing dependency arrays.但它警告我缺少依赖数组。
Whenever I pass dependencies it goes into an infinite loop每当我传递依赖项时,它就会进入无限循环
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);
});
}, []);
}
Edit: Looking at it again, the reason you're getting that error is because you're closing over the initial value of channels
when your useEffect()
runs the first time.编辑:再看一遍,您收到该错误的原因是因为您在useEffect()
第一次运行时关闭了channels
的初始值。 So channels
really should be in your dependency array because when that value changes, you would want the new value to be reflected in the state updates from then on.所以channels
真的应该在你的依赖数组中,因为当那个值发生变化时,你会希望新值从那时起反映在状态更新中。 You're sort of trying to get around it with the loadedChannels
array which is a weird anti-pattern.您正在尝试使用loadedChannels
数组来解决它,这是一种奇怪的反模式。
I would actually recommend that you tweak it to something like this.我实际上建议您将其调整为这样的内容。 Note how setChannels
is now called with a function, which takes the actual up to date value of channels
as an argument and lets you update the value without it being out of date due to a closure.请注意setChannels
现在是如何使用函数调用的,该函数将channels
的实际最新值作为参数,并允许您更新该值,而不会因闭包而过时。
Note also how the useEffect()
function returns another function that removes the Firebase event listener when the component unmounts!另请注意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);
}
}, []);
}
If you still get a warning, it's probably because either firebase
or setChannels
are references in the function and should be considered for addition to the dependency array.如果你仍然会得到一个警告,这可能是因为无论是firebase
或setChannels
在函数的引用,并应考虑除了依赖阵列。 But in this case you (hopefully) know what you're doing and what's going on and can ignore the warning.但是在这种情况下,您(希望)知道您在做什么以及正在发生什么并且可以忽略警告。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.