React中setPeerList更新状态后newPeer回调中peerList仍为undefined如何解决

• 核心是函数组件闭包捕获机制导致的：你的useEffect仅将peerName作为依赖，只会在组件初始化且peerName确定后执行一次。执行阶段注册的所有Meeting实例事件回调，捕获的都是当前渲染作用域下的peerList，此时peerList的初始值为undefined。
• 后续调用setPeerList更新状态只会触发组件重渲染，生成新作用域下的peerList变量，但已经注册到Meeting实例上的老回调不会自动更新引用，始终持有第一次渲染时的peerList值，所以打印结果永远是undefined，和setState的异步更新特性无关。

下面提供两种常用的稳定修复方案：

方案1：补充useEffect依赖+添加清理逻辑 #

适合事件注册成本较低的场景，每次peerList更新时重新注册回调，确保读取到最新状态：

useEffect(() => {
    let temp = new Meeting();
    temp.setDebug(true);
    temp.on("data", param => {
        console.log("Data Event Recevied:" + JSON.stringify(param));
    })
    temp.on("initialPeerList", (newPeerList) => {
        console.log("initialPeerList event recevied");
        console.log(newPeerList);
        setPeerList(newPeerList);
    });
    temp.on("newPeer", (newPeer) => {
        console.log("newPeer event recevied");
        console.log(peerList); // 可获取最新的peerList值
    });
    temp.on("removePeer", socketId => {
        console.log("removePeer event recevied");
        
    });
    temp.on("stream", param => {
        console.log("A stream event received:" + JSON.stringify(param));
        
    })
    temp.join(peerName);
    setMeeting(temp);

    // 清理逻辑：effect重新执行前销毁旧实例，避免内存泄漏和重复监听
    return () => {
      // 如果Meeting实例提供了销毁/解绑事件的方法，在此处调用
      temp.destroy?.()
    }
}, [peerName, peerList]); // 把peerList加入依赖数组

方案2：用useRef存储状态的同步副本 #

适合不想频繁重新注册事件的场景，利用ref的可变特性绕过闭包限制：
首先新增ref声明和同步逻辑：

const [peerList, setPeerList] = useState();
// 新增ref同步peerList的最新值
const peerListRef = useRef(peerList);
// 状态更新时同步更新ref
useEffect(() => {
  peerListRef.current = peerList;
}, [peerList]);

修改newPeer事件回调，读取ref的current值即可：

temp.on("newPeer", (newPeer) => {
    console.log("newPeer event recevied");
    console.log(peerListRef.current); // 永远读取到最新的peerList
});

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