React渲染时如何为video标签正确设置srcObject属性

• 你声明的单个useRef实例被绑定到了所有循环生成的<video>标签上，ref最终仅会指向最后一个渲染完成的video元素，无法对所有video元素进行独立操作
• 直接在map返回JSX的逻辑中操作DOM属性时，对应的video元素还未完成挂载，此时访问ref.current为undefined，会直接触发报错

下面给出两种常用的稳定实现方案：

方案1：Ref数组存储所有video引用（适合流需要动态更新的场景） #

import React from 'react';

function VideoRender({ incData }) {
  // 声明ref数组存储每个video的DOM引用
  const videoRefs = React.useRef([]);

  // 数据更新、DOM挂载完成后批量设置媒体流
  React.useEffect(() => {
    incData.forEach((el, i) => {
      const videoEl = videoRefs.current[i];
      // 确保DOM存在、媒体流存在时再赋值
      if (videoEl && el.mediaStream) {
        videoEl.srcObject = el.mediaStream;
        // 处理自动播放异常
        videoEl.play().catch(err => console.log('自动播放失败:', err));
      }
    });
    // 组件卸载时释放媒体资源
    return () => {
      videoRefs.current.forEach(video => {
        if (video) video.srcObject = null;
      });
    };
  }, [incData]);

  return incData.map((el, i) => (
    <div key={i}>
      <video 
        ref={el => videoRefs.current[i] = el} 
        autoPlay 
        muted // 静音可绕过大多数浏览器的自动播放限制，按需保留
      />
    </div>
  ));
}

方案2：回调ref直接绑定（适合渲染时流已经准备完成的场景） #

import React from 'react';

function VideoRender({ incData }) {
  // 元素挂载时自动触发回调，直接设置当前video的媒体流
  const bindVideoStream = (videoEl, mediaStream) => {
    if (videoEl && mediaStream) {
      videoEl.srcObject = mediaStream;
      videoEl.play().catch(err => console.log('自动播放失败:', err));
    }
  };

  return incData.map((el, i) => (
    <div key={i}>
      <video 
        ref={el => bindVideoStream(el, el.mediaStream)} 
        autoPlay 
        muted
      />
    </div>
  ));
}

• Key值优化：如果incData中存在唯一标识字段（如流ID、数据ID），请替换掉map循环中使用数组索引作为key的写法，避免数组变动时DOM复用导致的流绑定错乱
• 自动播放兼容：绝大多数现代浏览器禁止非静音视频未经用户交互自动播放，若需要保留音频，需要引导用户进行页面点击交互后再触发video的play方法
• 资源清理：流更新、组件卸载时主动将srcObject置为null，可避免内存泄漏和媒体资源占用问题

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