Getting Uncaught TypeError: Cannot set properties of null while using useRef

Question

我正在构建一个需要访问用户设备摄像头并在屏幕上显示视频的应用。我通过使用 video HTML 对象并将媒体流分配为其 srcObject 来完成此操作，并且它按我预期的方式工作。但是，TypeScript 仍然给我一个错误，因为我将 srcObject 属性分配给可能为空的 videoRef.current.

首先，我获取媒体并将其分配给 useEffect 内的 videoRef，如下所示：

const Page: React.FC = () => {
  const videoRef = useRef<HTMLVideoElement | null>(null)
  const [mediaStream, setMediaStream] = useState<MediaStream | null>(null)

  useEffect(() => {
    const getDeviceMedia = async () => {
      const stream = await navigator.mediaDevices.getUserMedia({
        video: true
      })

      setMediaStream(stream)
      videoRef.current!.srcObject = stream
    }
    
    getDeviceMedia()
  }, [])

最后，我 return HTML 视频将其 ref 分配给视频 ref：

return(
  <video ref={videoRef} autoPlay muted /> 
)

媒体在屏幕上正确显示（我可以看到相机的视频）但是 TypeScript 给我这个错误：

Uncaught TypeError: Cannot set properties of null (setting 'srcObject')

我是不是做错了什么或者有办法解决这个错误？

Answer 1

这是一个 JavaScript 错误，您在执行时遇到了错误。因为当 useEffect 的回调第一次被调用时，JSX 可能还没有被渲染。因此 videoRef.current 仍然是 null。尝试这样做：

useEffect(() => {
  const getDeviceMedia = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true
    })
    setMediaStream(stream)
    if(videoRef.current){
      videoRef.current.srcObject = stream
    }
  }
  getDeviceMedia();
},[])

Getting Uncaught TypeError: Cannot set properties of null while using useRef

Getting Uncaught TypeError: Cannot set properties of null while using useRef

javascript

reactjs

typescript

next.js