ReactJS中select组件onChange处理函数向父组件传值异常

出现固定一次更新延迟，本质是React类组件的setState为异步批量更新机制：

• 执行this.setState({value: event.target.value})后，this.state不会立刻同步修改，状态更新会被推入队列，等当前事件回调执行完毕、下一轮渲染时才会生效
• 你在调用setState后立刻执行this.props.selectCB(this.state.value)，此时读取到的还是更新前的旧state值，传给父组件的自然是上一次的选中结果，才会永远慢一步
• 你提到文本框、文本域相同逻辑能正常运行属于巧合，类组件中setState后立刻读取state永远拿不到最新值，和控件类型无关。

二选一即可：

方法1：直接传递最新的事件值，不依赖更新后的state #

提前把最新选中值存到变量里，同时传给setState和父组件回调，跳过读state的步骤：

handleChange = (event) => {
  const currentValue = event.target.value
  this.setState({value: currentValue})
  // 直接传入刚拿到的最新值，不需要等state更新
  this.props.selectCB(currentValue)
  console.log(currentValue)
}

方法2：在setState的完成回调中触发传值 #

setState支持传入第二个回调函数，该函数会在state真正更新完成、组件重渲染结束后执行，此时读取到的state就是最新值：

handleChange = (event) => {
  const currentValue = event.target.value
  this.setState({value: currentValue}, () => {
    // 此作用域内this.state.value已完成更新
    this.props.selectCB(this.state.value)
    console.log(this.state.value)
  })
}

这个场景不需要在子组件SelectTag中单独维护一份选中状态，直接把状态提升到父组件NameForm做统一维护，把子组件改成纯受控组件，从根源上避免双份状态不同步的问题：

class SelectTag extends React.Component{
  render(){
    return (
      <label>GENDER: <br/>
        <select value={this.props.value} onChange={this.props.onChange}>
          <option value='Male'>Male</option>
          <option value='Female'>Female</option>
          <option value='Not Specified'>Not-Specified</option>
          <option value='Non Binary'>Non-Binary</option>
        </select>
        <br/>
      </label>
    )
  }
}

class NameForm extends React.Component{
  constructor(props){
    super(props)
    // 选中值统一存在父组件，初始值设为Male
    this.state = {selectValue: 'Male'}
  }

  handleSelectChange = (event) => {
    this.setState({selectValue: event.target.value})
  }
  handleSubmit = (event) => {
    console.log('Logged select: ' + this.state.selectValue)
    alert(`Submitted : ${this.state.selectValue}`)
    event.preventDefault()
  }

  render(){
    return <form onSubmit={this.handleSubmit}>
        <SelectTag 
          value={this.state.selectValue} 
          onChange={this.handleSelectChange}
        />
        <input type='submit' value='Submit'></input>
    </form>
  }
}

这种单状态源的写法是React官方推荐的受控组件实现方式，不会出现更新延迟、状态不一致的问题。

内容的提问来源于stack exchange，提问作者Naveen Udhay