Javascript 为什么新列表仅在react中的输入更改后显示？

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

我认为这是因为在输入中点击任何内容都会更新页面，因此会调用componentDidUpdate，但我不确定为什么RenderCatList不会在我喜欢的时候更新

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

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

导出类Chat.Component{
建造师（道具）{
超级（道具）；
此.state={
文本：“”，
下周三:0,，
聊天列表：[]
};
}
componentDidMount（）{
socket.on（'newMessage'，（message）=>{this.state.chatList.push（{…message}）}）；
}
onTextChange（e）{
this.setState（{text:e.target.value}）；
}
RenderCatList（）{
返回此.state.chatList.map（（chatItem）=>{
return
{chatItem.from}:{chatItem.text}
});
} 
发送（e）{
e、 预防默认值（）；
socket.emit（'createMessage'{
发件人：this.props.owner，
text:this.state.text
}，函数（）{}）；
}
render（）{
返回(
发送聊天
{this.renderCatList（）}
)
}
};

只有使用

setState（）

更改状态，才能重新启动组件。您需要更改向状态添加注释的方式，例如：

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

---

键入某些输入后当前显示消息的原因是，更改输入会使用

setState（）

更改状态，并导致组件重新运行。

是！美好的我之前试过类似的方法，但一定是做错了什么。我感谢你和你的帮助！我喜欢这里的数组分解：）