React：状态更改时 ChildComponent 不会重新渲染

Question

我正在用 React 开发一个简单的聊天应用程序，消息存储在 Redux Store 中。我正在循环浏览消息并在<MessageContainer /> 中呈现<Message />。现在我想向发送者确认消息已被接收者看到，因为我正在监听一个事件并更改 redux 中的消息对象，这会导致 <Message /> 的状态发生变化。我在<Message /> 中使用getDerivedStateFromProps() 并且能够更改状态，但是组件没有得到更新。

class MessageContainer extends React.Component {
    render() {
     const {messages} = this.props;
     return messages.map(message => <Message key={message.id} {...message} />)
   }
}

class Message extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
         isMessageSeen: props.isMessageSeen
       }
    }
   static getDerivedStateFromProps(props,state) {
      return {isMessageSeen: props.isMessageSeen}
   }
  render() {
   const {isMessageSeen} = this.state;
   <div>
    {isMessageSeen ? 'Message Seen' : 'Message Sent'}
   </div>
 }
}

Answer 1

为什么只使用道具？

class Message extends React.Component {
  render() {
   <div>
    {this.props.isMessageSeen ? 'Message Seen' : 'Message Sent'}
   </div>
  }
}

当 props 改变时，React 总是会重新渲染