React状态更新后未渲染全部元素（WebRTC会议场景）求助

核心问题根源 #

1. 状态更新方式错误：如果更新connectionList时直接修改原数组（比如用push后直接setConnectionList(connectionList)），数组引用未发生变化，React的浅比较机制会认为状态没有更新，不会触发完整的重新渲染，导致新增元素无法即时渲染。
2. ref依赖index的逻辑不可靠：用index >= remoteVideoStreamList.current.length判断是否添加元素，会因为React组件复用、异步渲染等问题导致漏处理新元素的ref回调。

具体修复步骤 #

1. 修复状态更新逻辑 #

必须使用不可变数据模式更新connectionList，确保每次更新都创建新数组，触发React的重新渲染：

// 错误示例（直接修改原数组）
// connectionList.push(newStream);
// setConnectionList(connectionList);

// 正确示例（函数式更新+新数组）
const handleNewRemoteUser = (newStream) => {
  setConnectionList(prevList => [...prevList, newStream]);
};

2. 重构ref存储逻辑 #

放弃依赖index和数组长度的判断，改用stream.id作为唯一标识，用对象存储音视频元素，避免漏处理或重复添加：

// 初始化ref为对象，key为stream.id
const remoteVideoStreamList = useRef({});
const remoteAudioStreamList = useRef({});

// 视频元素的ref回调
<video 
  ref={el => {
    if (el) {
      // 挂载时添加到ref对象
      remoteVideoStreamList.current[stream.id] = {
        stream: el,
        fromUserID: stream.fromUserID
      };
    } else {
      // 卸载时从ref对象移除
      delete remoteVideoStreamList.current[stream.id];
    }
  }} 
  autoPlay 
  style={{
    height: '250px',
    width: '250px',
    border: 'solid 1px black'
  }} 
/>

// 音频元素的ref回调
<audio 
  ref={el => {
    if (el) {
      remoteAudioStreamList.current[stream.id] = {
        stream: el,
        fromUserID: stream.fromUserID
      };
    } else {
      delete remoteAudioStreamList.current[stream.id];
    }
  }} 
  autoPlay 
/>

3. 验证WebSocket消息处理 #

确保收到远程用户流的消息时，正确调用上述handleNewRemoteUser方法，且每个stream对象都有唯一的id（保证React key的唯一性，避免复用错误）。

为什么之前的代码会出现问题？ #

• 直接修改原数组会导致React无法检测到状态变化，仅在热更新（保存文件）时组件重新挂载才会读取最新数组内容。
• 依赖index和数组长度的ref逻辑，在React异步渲染或组件复用场景下，可能跳过新元素的ref回调执行，导致音视频元素未被添加到列表中。

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