反应：当 state 更改时，ChildComponent 不会重新渲染

Question

I am working on a simple chat application in React with messages stored in Redux Store. I am looping through the messages and rendering <Message /> in <MessageContainer /> . Now I want to acknowledge the sender that the message has been seen by the receiver, for that I am listening to an event and changing the message object in redux, which leads to change the state of the <Message /> . I am using getDerivedStateFromProps() in <Message /> and able to change the state, however the component is not getting updated.

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

why do any of that and just use props?

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

React will always re-render when props change