useEffect清理中的observer.unoserve()引发错误，指出参数的类型不是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
};

如果我在调用unsobserve:之前添加一个检查，它会正常工作

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

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

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

Answer 1

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