使用 useRef 钩子获取 TypeError...“null 不是对象”

Question

React 开发者您好。

所以我正在为客户编写一个应用程序。客户想要一个在视口中显示视频时播放视频（无声音，内联播放）的页面，并在视频超出视口时暂停。所以我做了一个自定义钩子来做到这一点。这是我的代码（忽略导入，只是 useRef 和 useEffect）：

const usePlayVideo = options => {
const wrapperRef = useRef(null);
const videoRef = useRef(null);
const handleVid = entries => {
    const [entry] = entries;
    if (entry.isIntersecting) videoRef.current.play();
    else videoRef.current.pause();
    };
useEffect(() => {
    const wrapper = wrapperRef.current;
    const observer = new IntersectionObserver(handleVid, options);
    if (wrapper) observer.observe(wrapper);
    return () => {
        if (wrapper) observer.unobserve(wrapper);
    };
    }, [wrapperRef, options]);
    return [wrapperRef, videoRef];
};
export { usePlayVideo };

然后，在组件中，我导入钩子并像这样使用它：

function ClientAsk() {
    const [wrapperRef, videoRef] = usePlayVideo({
        root: null,
        rootMargin: "0px",
        threshold: 0.3,
    })

    return (
        {/* bunch of other divs and stuff */}
        <div className="grid_s_start_3 grid_s_span_20" ref={wrapperRef}>
            <video ref={videoRef} id="video" playsInline muted preload="auto" loop style={{ width: "100%" }}>
                <source src={ClientVid} type="video/mp4" />
            </video>
        </div>
        {/* rest of other divs and stuff */}
        );
}

export default ClientAsk;

就是这样。

在我的开发环境的浏览器中，这很好用！按预期工作！我很兴奋。

但我在我的 iPhone 上使用 iOS Safari 进行了尝试，它也可以工作...直到我在播放视频时返回上一页。

所以，页面顶部有一个“

但是，如果我停止滚动视频，并且它正在播放，并且我按下后退按钮（或 Safari 浏览器的后退按钮），我会收到一个开发错误：

TypeError: null is not an object (evaluating 'videoRef.current.pause')
handleVid
src/hooks/usePlayVideo.js:8
5 | const videoRef = useRef(null);
6 | const handleVid = entries => {
7 | const [entry] = entries;
> 8 | if (entry.isIntersecting) videoRef.current.play();
| ^ 9 | else videoRef.current.pause();
10 | };

现在，我想我知道为什么会发生这种情况......但是，我根本无法弄清楚如何解决这个问题或让错误停止发生。我想知道是否有人对此有任何提示？我在自定义钩子中使用了错误的钩子吗？我不应该使用“null”作为 useRef 的默认值吗？这只是一个 iOS 问题吗？

任何帮助将不胜感激。

谢谢！

Answer 1

所以问题是这行代码返回了一个null值导致返回上一页时出错：

const handleVid = entries => {
    const [entry] = entries;
    if (entry.isIntersecting) videoRef.current.play();
    else videoRef.current.pause();
};

根据上述@Zac，其原因是因为 videoRef 常量在写入时始终为真值，其当前值可能为假（在这种情况下为 null）。

所以，我按照他的建议重写了它，如下所示，将 handleVid 函数包装在 if (videoRef.current) 条件中：

if (videoRef.current) { 
   if (entry.isIntersecting) videoRef.current.play(); 
 else videoRef.current.pause(); 
 }; 

这解决了 Safari 上的 TypeError，并且在返回上一页时不再显示。

非常感谢您的帮助！