了解反应中的状态输入

Question

我有一个方法submitMessage，应该将已存储在我的输入状态中的当前消息串联起来，然后清除它：

submitMessage() {
  this.setState({
    input: '',
    messages : [...this.state.messages, this.state.input]
  });
}

[该方法也按预期工作，整个应用程序也是如此，我不明白的是为什么输入可以在连接之前被清除，输入和this.state.input不在内存中的同一位置？

这是我的完整代码：

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }    
  }
  handleChange(event) {
    this.setState({
      input: event.target.value,
      messages: this.state.messages
      })
  }
  submitMessage() {
    this.setState({
      input: '',
    messages : [...this.state.messages, this.state.input]
    })
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input onChange={this.handleChange.bind(this)} value={this.state.input} />
        <button onClick={this.submitMessage.bind(this)}>Submit</button>
        <ul>{this.state.messages.map((item) => {
            return <li key={item + 1}>{item}</li>
          })}
        </ul>
      </div>
    );
  }
};

Answer 1

为什么<input />和this.state.input不在内存中的同一位置？