React 中的清理引用问题

Question

我有一个问题导致 ESLINT 在控制台中输出错误。我想修复控制台中的问题。请在此处查看 codesandbox

更新问题

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

Answer 1

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)

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

React Hook useEffect has a missing dependency: callbackFunction. Either include it or remove the dependency array. (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]);

更新

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)

您可以通过包装在 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]);

Answer 2

参考你的更新问题你需要使用useCallback

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

React 中的清理引用问题

Cleanup ref issues in React

reactjs

eslint

react-hooks

更新