React Context修改状态后DOM未重新渲染，聊天消息不显示问题排查

React 基于 state 的引用变化判断是否需要触发重渲染，你所有的 state 更新操作都是原地修改原始数组/对象，没有生成新的引用，React 浅对比时认为 state 没有发生变化，因此不会触发组件重渲染。你在控制台能看到更新后的值，是因为控制台打印引用类型时会读取最新的内存值，不代表 React 检测到了更新。
具体的错误写法包括：

• 直接赋值引用：const usersList = loggedUsers 没有拷贝数组，只是把变量指向同一个内存地址
• 原地修改数组：user.messages.push()、users.push() 都是直接修改原数组内容
• 原地修改对象属性：user.hasNewMessages = true 直接修改原用户对象的属性
• 最终 setLoggedUsers 传入的还是原数组引用，React 直接跳过更新流程

所有 state 更新都要生成新的数组、新的修改对象，同时建议用函数式更新避免闭包捕获旧 state 导致的问题。

1. 修复消息监听回调 #

const listenerMessage = async (msgInfo: any) => {
  setLoggedUsers(prevUsers => {
    // map返回新数组，每个匹配的用户返回新对象
    return prevUsers.map(user => {
      if (user.userID === msgInfo.from) {
        return {
          ...user,
          // 生成新的messages数组，不原地push
          messages: [...user.messages, {
            message: msgInfo.message,
            fromSelf: false,
          }],
          hasNewMessages: user.userID !== state.userID ? true : user.hasNewMessages
        }
      }
      return user
    })
  })
};

2. 修复消息发送回调 #

const onMessage = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  if (state.userName) {
    socket?.emit('private-message', {
      message: mess,
      to: state.userID,
    });
    setLoggedUsers(prevUsers => {
      return prevUsers.map(user => {
        if (user.userID === state.userID) {
          return {
            ...user,
            messages: [...user.messages, { message: mess, fromSelf: true }]
          }
        }
        return user
      })
    })
  }
  setMess('');
};

3. 修复Provider中的工具方法 #

你当前Provider里的addUser、sortUsers也存在同样的原地修改问题，需要同步修复：

// 修复addUser
const addUser = (user: any) => {
  // 展开生成新数组，不原地push
  setLoggedUsers(prev => [...prev, user]);
};

// 修复sortUsers
const sortUsers = () => {
  setLoggedUsers(prevUsers => {
    // 先拷贝原数组生成新对象，再修改self属性
    const processed = prevUsers.map(user => ({
      ...user,
      self: user.userID === socket?.id
    }));
    // sort会原地修改数组，所以要在拷贝后的新数组上执行排序
    return processed.sort((a, b) => {
      if (a.self) return -1;
      if (b.self) return 1;
      return a.username.localeCompare(b.username);
    });
  });
};

使用setLoggedUsers(prev => 新值)的函数式更新写法，可以避免因为闭包捕获到旧的loggedUsers值导致的更新错误，比直接读取外部的loggedUsers变量更稳妥。

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