在 react-js 中的 useRef() 上出现未定义的错误

问题描述

我正在开发基于 webRtc 的视频会议应用程序并从浏览器获取视频流

  const myVideo = useRef();
  const userVideo = useRef();
  const connectionRef = useRef();

  useEffect(() => {
    navigator.mediaDevices.getUserMedia({ video: true,audio: true })
      .then((currentStream) => {
        setStream(currentStream);

        myVideo.current.srcObject = currentStream;
      })
      .catch((err) => {
        console.log("Not able to get user media permisiion",err);
      })

    socket.on('me',(id) => setMe(id));

    socket.on('callUser',({ from,name: callerName,signal }) => {
      setCall({ isReceivingCall: true,from,signal });
    });
  },[]);

我收到错误 Not able to get user media permisiion TypeError: myVideo.current is undefined

解决方法

Ref.current 为空，因为直到函数返回并呈现内容之后才会设置 ref。每次传递给它的数组内容的值更改时，useEffect 钩子都会触发。通过在数组中传递观察，可以利用 useEffect 钩子来完成您的任务。

useEffect(() => {
    navigator.mediaDevices.getUserMedia({ video: true,audio: true })
      .then((currentStream) => {
        setStream(currentStream);

        myVideo.current.srcObject = currentStream;
      })
      .catch((err) => {
        console.log("Not able to get user media permisiion",err);
      })

    socket.on('me',(id) => setMe(id));

    socket.on('callUser',({ from,name: callerName,signal }) => {
      setCall({ isReceivingCall: true,from,signal });
    });
  },[myVideo]);