React配合Socket.io开发时useState仅在单个浏览器中更新生效

第一步：确认Socket事件回调触发状态 #

首先验证跨端接收消息时，socket?.current.on("chat") 回调内的console.log(s)是否正常打印：

• 如果未打印，说明问题出在Socket连接层，和React状态无关：
  • 确认Socket实例为全局单例，没有在组件渲染时重复生成新连接
  • 确认后端广播消息使用io.emit()而非socket.emit()，后者仅会将消息回发给发送端
• 如果已打印，说明是React状态更新逻辑问题，按后续步骤修复

第二步：修复状态更新浅比较问题 #

React useState对引用类型数据采用浅比较判定是否需要更新，如果你传入的s是后端返回的对象，未改变引用的情况下React会判定状态无变化，跳过重渲染和相关useEffect触发。
修改状态更新逻辑，传入新引用的对象即可：

socket?.current.on("chat",(s)=>{
  // 解构生成新对象，若为多层嵌套对象可替换为深拷贝逻辑
  setmsg({...s})
  console.log(s)
})

第三步：修复事件监听泄漏问题 #

你当前的useEffect没有配置卸载清理逻辑，组件多次挂载卸载后会绑定重复的chat事件回调，也会导致状态更新异常。修改useEffect逻辑如下：

const [msg, setmsg] = useState(null)

useEffect(()=>{
  if (!socket.current) return
  const chatHandler = (s) => {
    setmsg({...s})
    console.log(s)
  }
  socket.current.on("chat", chatHandler)
  // 组件卸载时取消事件监听
  return () => {
    socket.current.off("chat", chatHandler)
  }
}, [])

useEffect(()=>{
  console.log(msg)
}, [msg])

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