为什么新列表仅在反应输入更改后显示？

Question

通过“发送”提交新消息以添加到我要呈现的列表后，客户端屏幕上没有更新任何列表。但是，一旦我在那点之后在输入框中执行任何操作，就会显示该项目。所以它正在工作......只是在修改器更改调用之后才更新并且没有按照我想要的方式工作。 :D

我认为这是因为之后点击输入中的任何内容都会更新页面，因此调用了 componentDidUpdate，但我不确定为什么当我喜欢它时 renderChatList 没有更新。

我可以做些什么或四处走动来解决这个问题？

export class Chat extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      text: '',
      nextId: 0,
      chatList: []
    };
  }

  componentDidMount(){
    socket.on('newMessage', (message) => {this.state.chatList.push({...message}) });
  }

  onTextChange(e){
    this.setState({text: e.target.value});
  }

  renderChatList() {
    return this.state.chatList.map((chatItem) => {
      return <li key={chatItem.createdAt}>{chatItem.from}: {chatItem.text}</li>
    });
  } 
  send(e) {
    e.preventDefault();
    socket.emit('createMessage', {
        from: this.props.owner,
        text: this.state.text
    }, function(){});
  }

  render(){
      return (
        <div>
          <form onSubmit={this.send.bind(this)}>
            <input type="text" onChange={this.onTextChange.bind(this)} placeholder="message"/>
            <button>Send chat</button>
          </form>
          <ul>{this.renderChatList()}</ul>
        </div>
      )
  }
};

Answer 1

只有通过setState()改变状态，组件才能重新渲染。您需要将向状态添加评论的方式更改为：

socket.on('newMessage', (message) => {
  this.setState({ chatList: [...this.state.chatList, {...message}] }) 
});

当前在您输入某些输入后显示消息的原因是因为更改输入会更改 setState() 的状态并导致组件重新呈现。