Question

我正在React中使用一个简单的聊天应用程序处理Redux Store中存储的消息。我正在遍历消息并在<Message />中渲染<MessageContainer />。现在，我想向发送者确认该消息已被接收者看到，因为我正在侦听一个事件并在redux中更改消息对象，这会导致<Message />的状态发生变化。我正在getDerivedStateFromProps()中使用<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>
 }
}

Answer 1

为什么要使用道具呢？

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

道具更改时，反应始终会重新渲染

反应：当状态更改时，ChildComponent不会重新呈现

1 个答案: