Javascript 如何在代码运行缓慢时使用console.log调试代码

我正在练习反应，刚才我要列一张待办事项清单。当我工作的时候。我想用console.log测试我的代码，看看输入值是否正确地传递到状态。然而，有一段时间我对console.log如何总是输出前一个状态感到困惑。直到后来，我才嵌入了

{this.state.myArray}

，它表明它工作正常。我假定

this.setState（{myArray:this.state.message}）仍在完成执行，而console.log已执行

我很确定我使用console.log测试代码的方法是错误的。新来的程序员

类ToDoInput扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.state={message:，myArray:}；
}
手变（e）{
this.setState（{message:e.target.value}）；
console.log（“handleChange:+this.state.message）；//测试
}
handleSubmit（e）{
this.setState（{myArray:this.state.message}）；
console.log（“handleSubmit:+this.state.myArray）；//测试
}
render（）{
返回(
{this.state.myArray}

);
}
}

您遇到的问题是
setState
是异步的，它不会立即设置状态，而是在短时间延迟后设置。React这样做有几个原因，但其中一个原因是它允许React对多个状态更改进行分组，然后一次性重新渲染组件，而不是每次调用setState都重新渲染

如果要在设置状态后使用状态，可以使用
setState
的第二个参数，如下所示：

  handleSubmit(e) {
    this.setState({ myArray: this.state.message }, () => {
      console.log("handleSubmit: " + this.state.myArray);
    });
  }

尽管Github的问题可能比您想要的更深入

在上面的示例中，可能值得将
console.log（this.state）
放在
render
函数中，因为它应该始终具有最新的状态。
状态更改是不同步的。尝试将回调作为第二个参数传递给
this.setState
，控制台日志如@evolutionxbox所示，尝试
this.setState（{message:e.target.value}，（）=>{console.log（this.state.message）；}）