useEffect 清理中的observer.unobserve() 抛出参数不是 Element 类型的错误

Question

简单组件示例：

export default function App () {
  const videoRef = useRef();
  const onScreen = useOnScreen(videoRef, "-300px"); // hook for play/pause based on visibility
  
  <div ref={videoRef} className="h-72 my-4 rounded-2xl">
    <ReactPlayer
      url="my-recording.mov"
      loop
      playing={onScreen ? true : false}  />
  </div>
}

我正在使用这里的 useOnScreen 挂钩： https: //usehooks.com/useOnScreen/

该钩子在运行时工作正常，但是当我通过使用react-router-dom单击链接来更改页面时，它会抛出以下错误：

TypeError: Failed to execute 'unobserve' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

我认为问题出在 useEffect 函数的清理中（也许当清理开始运行时 ref 已经被卸载，因此 ref.current 为 null）：

return () => {
  observer.unobserve(ref.current); // here ref.current might be null
};

如果我在调用 unobserve 之前添加检查，它可以正常工作：

return () => {
  if (ref.current) {
    observer.unobserve(ref.current);
  }
};

但我不确定这是否会让观察者继续运行并浪费资源。

请提供一个可行且高效的解决方案。

Answer 1

我遇到了同样的问题，但通过使用useLayoutEffect而不是useEffect在useOnScreen钩子中解决了它。