使用socket.io时useEffect内useState无法正确设置状态

核心问题原因 #

你遇到的情况大概率是两个原因之一：

1. Socket监听未正确清理：组件挂载时绑定了监听，但后续如果组件重新渲染（或卸载再挂载），旧的监听仍会保留，导致setReceivedMessage使用的是旧的闭包上下文，无法正确触发状态更新。
2. 状态更新的引用未变化：如果socket传输的data是对象/数组这类引用类型，直接调用setReceivedMessage(data)时，React的浅比较会认为前后状态引用相同，不会触发重渲染，也就不会执行第二个useEffect。

解决方案 #

1. 给Socket监听添加清理逻辑（必做） #

在绑定监听的useEffect中返回清理函数，移除对应的事件监听，同时处理引用类型数据的状态更新：

const [receivedMessage, setReceivedMessage] = useState(null);

useEffect(() => {
  // 抽离单独的处理函数，方便后续移除监听
  const handleReceiveMessage = (data) => {
    console.log("get received message", data);
    // 针对引用类型数据，创建新的引用确保React检测到变化
    const newMessage = typeof data === 'object' && data !== null 
      ? { ...data } // 对象用展开语法
      : Array.isArray(data) ? [...data] : data; // 数组单独处理，基础类型直接赋值
    setReceivedMessage(newMessage);
  };

  socket.current.on("receive-message", handleReceiveMessage);

  // 组件卸载时移除监听，避免内存泄漏和旧闭包问题
  return () => {
    socket.current.off("receive-message", handleReceiveMessage);
  };
}, []);

useEffect(()=>{
  console.log("updated received message: ", receivedMessage)
}, [receivedMessage])

2. 确保Socket实例正确初始化 #

确认socket.current在绑定监听前已经完成初始化，避免监听绑定到未就绪的实例上：

const socket = useRef(null);

// 先初始化socket实例
useEffect(() => {
  socket.current = io("http://你的服务器地址");
  
  // 可选：监听连接状态，确认实例正常工作
  socket.current.on("connect", () => {
    console.log("socket已连接");
  });

  return () => {
    socket.current.disconnect();
  };
}, []);

// 再绑定消息监听（和上面的监听逻辑一致）
useEffect(() => {
  const handleReceiveMessage = (data) => {
    console.log("get received message", data);
    const newMessage = typeof data === 'object' && data !== null 
      ? { ...data } 
      : Array.isArray(data) ? [...data] : data;
    setReceivedMessage(newMessage);
  };

  socket.current.on("receive-message", handleReceiveMessage);
  return () => {
    socket.current.off("receive-message", handleReceiveMessage);
  };
}, []);

额外验证点 #

• 打印data的类型和具体值，确认每次接收的data是否真的有内容变化。
• 用React DevTools查看receivedMessage的状态变化，直观确认状态是否被更新。

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