useContext中已填充的connectedUsers数组在context内部函数访问为空如何解决

这是典型的React闭包陷阱问题：
ChatBoard的useEffect依赖数组仅填写了socket，仅在组件挂载、socket变化时执行一次，此时捕获的addUser、connectedUsers都是初始状态的版本。后续context中connectedUsers更新后，useEffect不会重新运行，socket事件绑定的回调始终引用的是初始版本的addUser，该函数闭包内的connectedUsers永远是空数组。同理user-disconnected回调中读取的connectedUsers也存在相同的旧值问题。

步骤1：改造UsersProvider中的addUser方法 #

使用useState的函数式更新写法，直接从回调参数获取最新的状态，不需要读取外部的connectedUsers，彻底规避闭包陷阱：

const addUser = (user: any) => {
  setLoggedUsers(prevConnectedUsers => {
    // 先判断用户是否已存在，避免重复添加
    const userExists = prevConnectedUsers.some(u => u.userID === user.userID);
    if (userExists) return prevConnectedUsers;

    // 初始化新用户属性
    initUserProps(user);
    const newUserList = [...prevConnectedUsers, user];
    
    // 复用原有排序逻辑，保持列表顺序统一
    return newUserList.sort((a: any, b: any) => {
      if (a.self) return -1;
      if (b.self) return 1;
      return a.username.localeCompare(b.username);
    });
  });
};

步骤2：修正ChatBoard的useEffect逻辑 #

补全依赖数组，同时将事件回调单独命名，清理时完整移除所有绑定的事件，避免内存泄漏和重复触发：

useEffect(() => {
  if (socket == null) return;

  // 单独定义事件回调，方便后续清理
  const handleUsers = (users: any[]) => {
    if (socket.userID) {
      sortUsers(users, socket.userID);
    }
  };

  const handleUserConnected = (user: any) => {
    addUser(user);
  };

  const handleUserDisconnected = (userID: string) => {
    // 同样用函数式更新获取最新用户列表，规避闭包问题
    setLoggedUsers(prev => prev.map(u => 
      u.userID === userID ? {...u, connected: false} : u
    ));
  };

  // 绑定事件
  socket.on('users', handleUsers);
  socket.on('user-connected', handleUserConnected);
  socket.on('user-disconnected', handleUserDisconnected);
  
  // 清理时移除所有绑定的事件
  return () => {
    socket.off('users', handleUsers);
    socket.off('user-connected', handleUserConnected);
    socket.off('user-disconnected', handleUserDisconnected);
  };
// 补全所有用到的外部变量作为依赖
}, [socket, sortUsers, addUser, setLoggedUsers]);

可选优化 #

如果需要减少事件重复绑定的频次，可以用useCallback包裹UsersProvider中的addUser、sortUsers方法，仅在依赖变化时才生成新的函数实例。

内容的提问来源于stack exchange，提问作者Žiga Grošelj