与useEffect一起使用时，React钩子useRef为空

Question

我想使用React钩子的usereF来设置视频流的src对象，但视频引用为null，我得到的错误是：TypeError：无法在GetMedia处设置null的属性“src对象”。我正在使用useEffect来调用记录引用的函数。

奇怪的是，我看到了null和一个current值。参见控制台日志截图：

我读过useRef的文档，也看过关于Stack Overflow和Github的所有其他文章，但无法弄清楚这一点。最近的一个帖子是这一个。我做错了什么？

精简代码：

const App = () => {
  const webcamRef = useRef(null)

  useEffect(() => {
    getMedia();
  }, [webcamRef])

  const getMedia = async () => {
    try {
      console.log(webcamRef);
      let stream = await navigator.mediaDevices.getUserMedia({ video: true });
      webcamRef.current.srcObject = stream;
    } catch (err) {
      console.error(err);
    }
  };

  return <video id='webcam' ref={webcamRef} />
}

完整代码：沙箱:https://codesandbox.io/s/blissful-goldstine-rp9k5

Answer 1

根据您提供的代码，在我的端似乎工作得很好。

为了播放视频，我添加了webcamref.current.play()。

useEffect应该总是在组件完全挂载（/呈现）之后运行，所以当效果运行时webcamref.current不应该为null，除非有条件地呈现了视频。

此外，在useEffect中，不应该在依赖数组中有一个ref，因为这样做什么也不做，而且看起来在ref发生更改时效果会被重新触发，尽管它不会发生更改。

https://codesandbox.io/s/informing-sara-9skhr？file=/src/app.js

来自Jam关于有条件呈现视频的更新：

你要做的主要事情是分离出效果。您希望getMedia调用仅在video元素在页面上时发生，否则webcamref.current不能指向任何内容。

因此，在本例中，我将第一个效果设置为loaded为true，然后创建第二个效果，使用loaded作为依赖项，以便在预处理完成后调用getMedia。

  useEffect(() => {
    const loadItems = async () => {
      console.log("preprocessing here");
    };  
    loadItems().then(() => {
      setLoadedStatus(true);
    });
  }, []);

  useEffect(() => {
    if (!loaded) return;
    const getMedia = async () => {
      try {
        console.log(webcamRef.current);
        let stream = await navigator.mediaDevices.getUserMedia({ video: true });
        webcamRef.current.srcObject = stream;
        webcamRef.current.play();
      } catch (err) {
        console.error(err);
      }
    };

    getMedia();
  }, [loaded]);

https://codesandbox.io/s/discarted-violet-S92D0？file=/src/app.js