反應：當 state 更改時，ChildComponent 不會重新渲染

Question

我正在使用存儲在 Redux 存儲中的消息在 React 中開發一個簡單的聊天應用程序。 我正在遍歷消息並在<MessageContainer />中呈現<Message /> > 。 現在我想確認發送方消息已被接收方看到，因為我正在偵聽一個事件並更改 redux 中的消息 object，這導致更改<Message />的 Z9ED39E2EA931586B6A985A6942EF573E。 我在<Message />中使用getDerivedStateFromProps()並且能夠更改 state，但是該組件沒有得到更新。

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 總是會重新渲染