React 中的清理引用问题

Question

我有一个问题，因为 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]);

Answer 1

ref 值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的依赖 Hook（在第 33 行）在每次渲染时更改。将它移到 useEffect 中 打回来。或者，将“callbackFunction”的定义包装在 它自己的 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]);