Javascript 反应：当状态更改时，未重新呈现ChildComponent

我正在开发一个简单的聊天应用程序，用Redux商店中存储的消息进行响应。我正在循环浏览消息并在

中呈现

。现在，我想确认发送方消息已被接收方看到，因为我正在侦听事件并在redux中更改消息对象，这将导致更改

的状态。我正在

中使用

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>
 }
}

class MessageContainer扩展了React.Component{
render（）{
const{messages}=this.props；
返回messages.map（message=>）
}
}
类消息扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
isMessageSeen:props.isMessageSeen
}
}
静态getDerivedStateFromProps（props，状态）{
返回{isMessageSeen:props.isMessageSeen}
}
render（）{
const{isMessageSeen}=this.state；
{isMessageSeen？'Message Seen'：'Message Sent'}
}
}

为什么要这样做而只使用道具

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

类消息扩展了React.Component{
render（）{
{this.props.isMessageSeen？'Message Seen'：'Message Sent'}
}
}

---

当道具更改时，React将始终重新渲染

同意您的意见。我使用了不同的图标来代替“Message Seen”和“Message Sent”，这两个图标不会随情况而改变，但我只是检查了paragreaph标签的效果。不确定为什么图标没有被重新渲染。@PrashantAgarwal如果这回答了您的问题，您能将其标记为正确吗？请随意询问另一个关于不重新渲染的图像的问题，我很乐意回答：）