ReactJS 渲染函数没有被更新

Question

我正在尝试使用 Material UI 制作聊天功能。我创建了一个功能，用户可以在其中发布新的聊天消息，然后通过 reducer 发送这些消息，然后保存在 redux 存储中。此过程按预期工作，但新聊天消息仅在用户刷新页面后出现。我想知道为什么我的渲染功能没有更新。这是主要的聊天画面。

const ChatFunction = (props) => {
  const classes = useStyles();
  const { user } = props;
  const userMessages = props.userMessages || {};
};

const mapStateToProps = (state) => {
  return {
    user: state.user,
    userMessages:
      state.messages &&
      state.messages.find(
        (userMessages) => userMessages.otherUser.username === state.currentMessage
      )
  };
};

export default connect(mapStateToProps, null)(ChatFunction);

postMessage 函数然后通过我的 reducer 并调用我的 reducer 函数以将新消息添加到消息数组中。

export const newMessage = (state, payload) => {
  const { message, sender } = payload;
  return state.map((userMess) => {
    if (userMess.id === message.Id) {
      userMess.messages.push(message);
      userMess.latestMessageText = message.text;
      return userMess;
    } else {
      return userMess;
    }
  });
};

那么，有谁知道为什么不能正确刷新？

Answer 1

当您直接压入用户的messages 数组并改变其他属性时，您正在改变它。

export const newMessage = (state, payload) => {
  const { message, sender } = payload;
  return state.map((userMess) => {
    if (userMess.id === message.Id) {
      userMess.messages.push(message); // <-- mutation!!
      userMess.latestMessageText = message.text; // <-- mutation!!
      return userMess;
    } else {
      return userMess;
    }
  });
};

在 React 中更新状态时，您需要浅拷贝状态，并将任何嵌套状态更新为 React 协调工作的新对象引用。

export const newMessage = (state, payload) => {
  const { message, sender } = payload;

  return state.map((userMess) => { // <-- shallow copy of state
    if (userMess.id === message.Id) {
      return { // <-- return new user message object
        ...userMess, // <-- shallow copy of previous user message object
        messages: [message.text, ...userMess.messages], // prepend message, return new array
        latestMessageText: message.text, // update property
      };
    } else {
      return userMess;
    }
  });
};