在 useEffect 清理中的observer.unobserve() 抛出参数不是元素类型的错误答案

【问题标题】：observer.unobserve() in useEffect cleanup throwing error that parameter is not of type Element在 useEffect 清理中的observer.unobserve() 抛出参数不是元素类型的错误
【发布时间】：2021-06-27 15:49:53
【问题描述】：

简单组件示例：

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 为空）：

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

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

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

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

请提供一个行之有效的解决方案。

【问题讨论】：

标签： javascript reactjs observable

【解决方案1】：

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

【讨论】：