React onChange触发setState后立即获取formData为空问题

React中setState是异步批量执行的，调用setState后不会立刻更新this.state的值，你在调用setState的下一行同步打印this.state.formData，拿到的是更新前的旧状态，所以会显示为空，并不是状态没有更新成功。

• 方法1：使用setState的第二个回调参数，该回调会在状态更新完成、组件完成重渲染后执行，在回调内可以拿到最新的状态值：

handleSelect = async(e)=>{
  this.setState({
    formData: {
      ...this.state.formData,
      [e.target.name]: e.target.value,
    },
  }, () => {
    // 状态更新完成后执行，打印的是最新值
    console.log(this.state.formData);
  });
}

• 方法2：在componentDidUpdate生命周期中监听状态变化，状态更新完成后会触发该生命周期：

componentDidUpdate(prevProps, prevState) {
  // 仅当emp_location字段发生变化时执行逻辑
  if (prevState.formData.emp_location !== this.state.formData.emp_location) {
    console.log(this.state.formData);
  }
}

你的代码里存在冗余的this绑定逻辑：handleSelect本身已经是箭头函数形式的类属性，默认会绑定组件实例的this，不需要再在constructor中额外写this.handleSelect = this.handleSelect.bind(this);，保留任意一种绑定方式即可，不会影响功能但可以精简代码。

你可以直接观察下拉框的选中表现：选择选项后如果下拉框正确显示你选中的地点名称，就证明状态更新逻辑本身是正常的，之前的打印异常只是时机问题。

内容的提问来源于stack exchange，提问作者Shanu k k