关于react输入框的onChange事件的触发问题

Question

最近在学习react.js的过程中遇到了一点问题,先上代码图:

这个例子里面的input我给他添加了一个onChange事件事实改变state值来,并将state绑定在input的value上动态更新. 同时我在事件里面分别实时console除了state值和input的value值,问题就出现了...如下图

这个是输出state值的结果,问题在于每次输出的不是实时的值,而是上一次的值,相当于慢了一拍.

这个是直接根据事件的event事件获取到input取的实时value,这张图就没有这个问题.

所以我有一点不明白,为什么setState执行完毕之后,react的这一轮事务应该已经结束了呀,组件的state已经被更新了呀,为什么还会console出上一轮的值呢?望大佬解答.....

ps: 题外话: 为什么要给input的value绑定上state,我觉得不绑定也是可以的啊,用户可以正常输入,只需要一个onChange事件更新state就好了...

Answer 1

setState() 是一个异步操作，后面的 console.log() 执行的时候, state 还没更新完，所以输出的是之前的值。

Answer 2

setState作为一个异步操作，是支持回调的~this.setState({value: event.target.value}, () => console.log(this.state.value))

Answer 3

这样并没有问题，你最后提交的state肯定是和你输入的是一样的