React视频聊天应用useRef失效：无法设置null的srcObject属性

以下是针对该报错的常见排查方向和解决方法：

1. Ref未完成挂载就执行赋值操作 #

问题核心：当你尝试设置srcObject时，myVideo.current还处于null状态——因为对应的<video>元素还没渲染到DOM中，ref还未完成绑定。

解决方法：
将媒体流的赋值逻辑放到useEffect钩子中，确保等待组件挂载后再执行，同时增加ref存在性校验：

// Context.jsx 中的相关逻辑
import { useRef, useEffect } from 'react';

const myVideo = useRef(null);

useEffect(() => {
  async function initMediaStream() {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      // 先校验ref是否已绑定DOM元素
      if (myVideo.current) {
        myVideo.current.srcObject = stream;
      }
    } catch (err) {
      console.error('获取媒体流失败:', err);
    }
  }
  initMediaStream();
}, [myVideo]); // 依赖myVideo，确保ref状态更新时触发

2. 子组件未正确接收传递的Ref #

问题核心：如果VideoPlayer.jsx是函数组件，默认无法直接接收父组件传递的ref，需要通过forwardRef处理。

解决方法：
用React.forwardRef包裹VideoPlayer组件，将父组件传入的ref绑定到内部的<video>标签：

// VideoPlayer.jsx
import React from 'react';

const VideoPlayer = React.forwardRef((props, ref) => {
  return <video ref={ref} autoPlay muted playsInline {...props} />;
});

export default VideoPlayer;

在父组件中传递ref时直接传入即可：

<VideoPlayer ref={myVideo} />

3. 条件渲染导致Video元素未渲染 #

问题核心：如果VideoPlayer是在条件判断下渲染的（比如{isJoined && <VideoPlayer ref={myVideo} />}），当条件不满足时，myVideo.current会是null，此时执行赋值操作会报错。

解决方法：
将媒体流的初始化逻辑和条件渲染的状态绑定，确保只有当Video元素存在时才执行赋值：

useEffect(() => {
  // 条件不满足时直接返回
  if (!isJoined) return;

  async function initMediaStream() {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    if (myVideo.current) {
      myVideo.current.srcObject = stream;
    }
  }
  initMediaStream();
}, [isJoined, myVideo]); // 依赖条件状态和ref

4. 检查Ref的初始化是否正确 #

确认在Context.jsx中ref的初始化代码正确：

// 正确写法
const myVideo = useRef(null);
// 避免错误写法：useRef() 或拼写错误（比如myvideo）

内容的提问来源于stack exchange，提问作者Sujeet kumar