ReactJS render函数未更新，Redux新增聊天消息仅刷新页面后显示

你遇到的是Redux数据更新后组件未触发重渲染的典型问题，核心原因是你在reducer中直接修改了原有state对象的属性，没有返回全新的引用对象，Redux的浅比较逻辑检测不到数据变更，因此不会触发组件更新。

• Redux要求所有state更新必须是不可变更新：即修改数据时不能直接修改原state的属性，需要返回全新的对象/数组引用。
• 你当前的reducer虽然用map返回了新的外层数组，但匹配到对应聊天用户的userMess对象时，直接在原对象上调用push修改消息数组、直接赋值修改latestMessageText，然后返回了原对象的引用，Redux做浅比较时会认为该对象没有变化，因此不会触发关联组件的重渲染。只有刷新页面重新初始化store拉取全量数据时，新消息才会显示。

修改newMessage reducer，更新时返回全新的对象和消息数组即可：

export const newMessage = (state, payload) => {
  const { message, sender } = payload;
  return state.map((userMess) => {
    if (userMess.id === message.Id) {
      // 展开原对象属性，仅替换需要更新的字段，返回全新对象引用
      return {
        ...userMess,
        messages: [...userMess.messages, message], // 生成新的消息数组，不修改原数组
        latestMessageText: message.text
      }
    }
    // 未匹配的对象直接返回原引用即可，不需要额外处理
    return userMess;
  });
};

如果修改后仍有问题，可以额外检查两点：

• 确保mapStateToProps中的state.currentMessage取值正确，能匹配到对应聊天用户的消息对象
• 确保ChatFunction组件中没有用useMemo/useRef等hook错误缓存了userMessages的引用，导致组件没有使用props中更新后的值

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