大佬教程收集整理的这篇文章主要介绍了清理 React 中的引用问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个问题，导致 ESliNT 在控制台中输出错误。我想解决控制台中的问题。 请在此处检查代码和框
CLICK HERE
更新问题
The 'callBACkFunction' function makes the dependencIEs of useEffect Hook (at line 33) change on every render. Move it insIDe the useEffect callBACk. Alternatively,wrap the deFinition of 'callBACkFunction' in its own useCallBACk() Hook. (react-hooks/exhaustive-deps)
老问题
The ref value 'containerRef.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React,copy 'containerRef.current' to a variable insIDe the effect,and use that variable in the cleanup function. (react-hooks/exhaustive-deps)
eslint
React Hook useEffect has a missing dependency: 'callBACkFunction'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)
代码
useEffect(() => {
const observer = new IntersectionObserver(callBACkFunction,options);
if (containerRef.current) observer.observe(containerRef.current);
return () => {
if (containerRef.current) observer.unobserve(containerRef.current);
};
},[containerRef,options]);
引用值 containerRef.current 很可能已被
此效果清除功能运行的时间。如果这个 ref 指向一个节点
由 React 渲染，将 containerRef.current 复制到一个变量里面
效果，并在清理函数中使用该变量。
(react-hooks/exhaustive-deps)
只需将当前 ref 值保存到一个局部作用域变量中，以便在效果的清理函数中关闭。
React Hook useEffect 缺少依赖项：callBACkFunction。
包括它或删除依赖项数组。
(react-hooks/exhaustive-deps)
当 callBACkFunction 值更新时，您需要清除任何旧的订阅观察者、引用、回调等。将其添加到依赖数组中。
useEffect(() => {
let observerRefValue = null; // <-- variable to hold ref value
const observer = new IntersectionObserver(callBACkFunction,options);
if (containerRef.current) {
observer.observe(containerRef.current);
observerRefValue = containerRef.current; // <-- save ref value
}
return () => {
if (observerRefvalue) observer.unobserve(observerRefvalue); // <-- use saved value
};
},[callBACkFunction,containerRef,options]);
'callBACkFunction' 函数使得 useEffect 的依赖 钩子（在第 33 行）在每次渲染时都会发生变化。将其移动到 useEffect 内 打回来。或者，将 'callBACkFunction' 的定义包装在 它自己的 useCallBACk() 钩子。 (react-hooks/exhaustive-deps)
您可以通过包装在 useCallBACk 钩子中来记住此回调：
const callBACkFunction = React.useCallBACk((entries) => {
const [entry] = entries;
onIntersection(video.id,entry);
},[onIntersection,video]);
或者您可以简单地将回调移入 useEffect 钩子并更新依赖项：
useEffect(() => {
const callBACkFunction = (entries) => {
const [entry] = entries;
onIntersection(video.id,entry);
};
let observerRefValue = null;
const observer = new IntersectionObserver(callBACkFunction,options);
if (containerRef.current) {
observer.observe(containerRef.current);
observerRefValue = containerRef.current;
}
return () => {
if (observerRefvalue) observer.unobserve(observerRefvalue);
};
},[containerRef,onIntersection,options,video]);
关于您的更新问题，您需要使用 useCallBACk
const callBACkFunction = useCallBACk((entries) => {
const [entry] = entries;
onIntersection(video.id,entry);
},[video,onIntersection]);
以上是大佬教程为你收集整理的清理 React 中的引用问题全部内容，希望文章能够帮你解决清理 React 中的引用问题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。