React中socket.on()内部函数无法读取全局状态myChat问题

问题原因 #

• 核心是React闭包陷阱：socket.on('message received')的回调在组件初始渲染时创建，它捕获了当时的myChat状态值。后续myChat更新时，旧回调依然持有旧状态的引用，导致打印的是过时值。
• 你的useEffect未设置依赖数组，会在每次组件渲染时执行socketNewMessage()，造成重复绑定多个socket事件回调，进一步加重状态读取异常的问题。

解决方案 #

• 清理重复的socket事件监听：在useEffect中返回清理函数，移除之前绑定的socket事件，避免重复绑定。
• 用useRef保存最新状态引用：useRef的.current属性始终指向最新状态值，不受闭包限制，可在socket回调中直接读取。
• 给useEffect添加正确的依赖数组：仅当user、myChat、socketConnected这些依赖变化时，才重新执行socket事件绑定逻辑。

修改后的客户端代码示例 #

import { useRef, useEffect } from 'react';

// ...其他组件代码

// 用ref保存myChat的最新引用
const myChatRef = useRef(myChat);
// 监听myChat变化，实时更新ref
useEffect(() => {
  myChatRef.current = myChat;
}, [myChat]);

const socketNewMessage = () => {
  if (user) {
    // 先移除旧监听，避免重复绑定
    socket.off('message received');
    socket.on('message received', (message) => {
      // 从ref中读取最新的myChat
      console.log("NEW 2", myChatRef.current);
      if (message.msgRecieved.chatId === message.chatDetail._id) {
        addMessage({
          ID: message.msgRecieved._id,
          type: "message" 
        });
      }
      if (message.msgRecieved.chatId !== message.chatDetail._id) {
        // 处理通知逻辑
      }
      eraseUnreadMsg(user.userID, message.msgRecieved.chatId);
    });
  }
};

useEffect(() => {
  socketNewMessage();
  if (user && socketConnected) {
    // 清理typing相关旧监听
    socket.off('typing');
    socket.off('stop typing');
    socket.on('typing', () => setTyping(true));
    socket.on('stop typing', () => setTyping(false));
  }
  // 组件卸载或依赖变化时清理所有socket监听
  return () => {
    socket.off('message received');
    socket.off('typing');
    socket.off('stop typing');
  };
}, [user, socketConnected]); // 依赖数组：仅当user或socket连接状态变化时重新绑定

补充说明 #

• useRef不会触发组件重渲染，仅用于保存最新状态引用，完美适配异步回调中获取最新状态的场景。
• 每次绑定新的socket事件前先执行off方法，确保同一事件只有一个回调生效，避免重复执行逻辑导致的混乱。

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