Reactjs React中的清除ref问题

我有一个问题，因为ESLINT在控制台中输出错误。我想解决控制台中的问题。 请检查这里的代码沙盒

更新问题

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

可能已被更改 此效果清理功能运行的时间。如果此引用指向一个节点 由React呈现，将

containerRef.current

复制到内部变量 并在清理函数中使用该变量。 （反应钩/详尽的DEP）

只需将当前的ref值保存到一个局部范围的变量，以便在效果的清理函数中关闭

React Hook

useffect

缺少依赖项：

callbackFunction

。 包括它或删除依赖项数组。 （反应钩/详尽的DEP）

您将需要清理任何旧的订阅的观察者、引用、回调等。。。当

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]);

或者，您可以简单地将回调移动到

useffect

挂钩中，并更新依赖项：

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]);

---

谢谢现在我在callbackFunction中的codesandbox中遇到了另一个错误。你能检查一下吗？Thanks@Joseph当然，更新了答案和建议。@Joseph听起来你可能在使用

next.js

（？）。症状听起来像是陈旧的状态。如果下一页位于相同的路由/路径上，那么我的猜测是，它不会对指示该页已更改的任何路由参数的更新作出反应。解决方案是使用

componentdiddupdate

（基于类的组件）或另一个具有适当依赖关系的

useffect

钩子来更新您可能用于呈现内容的任何本地状态。@Joseph您可以使用沙箱并尝试转换到下一个.js模板，然后添加生成复制问题的运行沙盒工件所需的任何代码。充分披露：我可以帮助调试正在运行的Next.js应用程序，但我没有站起来的经验。我建议创建一个新的沙盒，并在这里提出一个新问题，这样有了适当的标签，您可能会更快地得到更好的帮助。请随意（看）我这里的问题链接，我可以看一看。@Joseph同时，如果你这里的问题通过回答得到了充分解决，那么我请你将其标记为接受，如果它有帮助，那么请不要忘记也投票。干杯

  const callbackFunction = useCallback((entries) => {
    const [entry] = entries;
    onIntersection(video.id, entry);
  }, [video, onIntersection]);