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()并导致组件重新呈现。

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

1 个答案: