React中使用onChange触发函数时setState更新延迟问题求助

你遇到的问题核心是React的setState是异步操作，调用setState后，state不会立刻完成更新，所以你在setState之后马上打印this.state.id，拿到的还是更新前的旧值，这就出现了“选择A时state还是空，选B时state变成A”的延迟现象。

解决方法：利用setState的回调函数 #

setState支持第二个参数，这是一个回调函数，会在state更新完成、组件重新渲染后执行，在这里可以安全地访问更新后的state值。

修改你的handleChange方法如下：

handleChange = (e) => {
  console.log(`target value is ${e.target.value}`)
  const toDelete = e.target.value
  this.setState({ id: toDelete }, () => {
    // 这里的this.state是已经更新后的状态
    console.log(`This.state.id = ${this.state.id}`)
    if (this.state.id === '') { // 注意你初始state里id默认是空字符串，不是null
      console.log('Error - Selected Option is Empty')
    } else {
      console.log(`Selected ID is: ${this.state.id}`)
    }
  })
}

额外注意点 #

• 你在constructor里写了this.handleChange = this.handleChange.bind(this)，但又用箭头函数定义了handleChange——箭头函数会自动绑定this，所以这行绑定代码是多余的，可以删掉。
• 初始state里id的默认值是空字符串''，判断空值时要对应这个类型，否则判断逻辑会出错。

修正后的完整handleChange代码 #

handleChange = (e) => {
  const toDelete = e.target.value
  console.log(`target value is ${toDelete}`)
  
  this.setState({ id: toDelete }, () => {
    console.log(`This.state.id = ${this.state.id}`)
    if (!this.state.id) {
      console.log('Error - Selected Option is Empty')
    } else {
      console.log(`Selected ID is: ${this.state.id}`)
    }
  })
}

这样修改后，每次选择下拉选项时，就能在回调里正确拿到更新后的id值了。

内容的提问来源于stack exchange，提问作者Jo Daniels