React+Socket.io多人会议功能peerList状态更新异常问题求解

问题根因 #

你遇到的peerList中间更新异常、丢失旧数据的问题，核心是3个React使用错误导致的：

1. 直接修改state状态：你在newPeerAdded事件回调里写了peerList[remotePeer.socketId]=peer，属于直接修改useState返回的状态对象，违反了React状态不可变的原则，会导致状态更新逻辑混乱。
2. useEffect依赖错误+未清理事件监听：你把peerList加入了useEffect的依赖项，每次peerList更新都会重新执行useEffect、重复注册socket事件监听，且没有销毁旧的监听函数。同一个socket事件触发时，多个不同闭包的监听函数会依次执行，闭包里缓存的是旧的peerList值，就会出现旧数据被覆盖的中间异常状态。
3. 状态更新未使用函数式写法：你更新peerList时直接复制当前闭包里的peerList，这个值是事件注册那一刻的旧值，不是最新的状态，会导致更新丢失。

修复方案 #

1. 固定不变量、移除无效依赖 #

用户代理判断得到的peerName、socket实例都属于组件初始化后就不会变化的值，用useMemo固定，避免不必要的重新计算和重连：

import {useEffect,useState, useMemo} from 'react';
// ...其他导入不变
export default function TestMeeting(){
  // 固定peerName，不会随渲染变化
  const peerName = useMemo(() => {
    const sUsrAg = navigator.userAgent;
    if (sUsrAg.indexOf("Edg")>-1) return "Edge";
    if (sUsrAg.indexOf("Chrome")>-1) return "Chrome";
    if (sUsrAg.indexOf("Firefox")>-1) return "Firefox";
    if (sUsrAg.indexOf("Safari")>-1) return "Safari";
    return "Unknown";
  }, []);
  const [peerList,setPeerList]=useState({});
  // 固定socket实例，避免重复连接
  const signalSocket = useMemo(() => {
    return io.connect(process.env.REACT_APP_SOCKET_URL+"testMeeting", { transports: ['websocket'] });
  }, []);

2. 重写useEffect逻辑，添加事件清理、使用函数式更新 #

移除useEffect对peerList的依赖，添加清理函数销毁旧的事件监听，所有peerList更新都用函数式写法，直接取最新的前序状态修改：

useEffect(()=>{
  const handleGreeting = (greeting)=>{
    const peer=new Peer(greeting.from,greeting.socketId);
    // 函数式更新，永远拿最新的状态扩展
    setPeerList(prev => ({
      ...prev,
      [greeting.socketId]: peer
    }));
  }
  const handleNewPeerAdded = (remotePeer)=>{
    const peer=new Peer(remotePeer.from,remotePeer.socketId);
    setPeerList(prev => ({
      ...prev,
      [remotePeer.socketId]: peer
    }));
    signalSocket.emit("sayHi",{socketId:remotePeer.socketId, peerName});
  };
  // 注册事件
  signalSocket.on("greeting", handleGreeting);
  signalSocket.on("newPeerAdded", handleNewPeerAdded);

  // 清理函数，组件卸载/依赖变更时销毁监听，避免重复触发
  return () => {
    signalSocket.off("greeting", handleGreeting);
    signalSocket.off("newPeerAdded", handleNewPeerAdded);
  }
},[signalSocket, peerName])

3. 修复渲染key的问题（最佳实践） #

列表渲染不要用index当key，直接用唯一的socketId作为key，避免渲染异常：

{
  Object.keys(peerList).map(key => (
    <div key={key}>
      {peerList[key].peerName()}
    </div>
  ))
}

以上修改完成后，peerList的更新就会和你的预期一致，不会再出现中间丢失旧数据的情况，服务端代码无需修改。

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