设置状态然后读取状态显示之前的值[重复]

Question

我有以下代码在文本框值更改时维护该值。但是，在调试 valueHasChangedEvent 时，下面显示的变量 x 行奇怪地保留了先前的值。有什么我做错了吗？显示的示例是当我在文本框中输入“test123”时。

谢谢

onChange 事件

<Input onChange={this.valueHasChangedEvent}
   type="text" 
   name="test" 
   id="test" />

方法

valueHasChangedEvent = (event) => {
    var self = this;
    const { name, value } = event.target;
    self.setState({test: value});  // value = 'test123'

    var x = self.state.test;  // x = 'test12'
}

Answer 1

状态需要一些时间来改变，并且由于您在状态变化之前读取状态值，因此您将获得先前的值作为输出。所以需要在setState函数的回调中写入或者在shouldComponentUpdate()中读取

var x;
self.setState({test: value}, (x) => {
  x = self.state.test
});