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

Question

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

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

标签： javascriptnode.jsreactjssocket.io

Answer 1

为什么要这样做并且只使用道具？

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

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