React中Select的onChange事件内为何获取到useState旧状态值？

• React中useState的更新方法（即代码里的setCountry）是异步批处理逻辑，本身没有返回Promise，代码里写的await setCountry(val)完全无法等待状态更新完成。
• 事件回调函数是基于当前组件渲染周期生成的闭包，回调内部读取到的countryOption永远是本次渲染时的快照旧值，即使在回调内调用了状态更新方法，在当前回调的整个执行流程中，都不会读取到更新后的新状态。

1. 优先复用事件回调内拿到的实时值 #

你在事件处理器里已经通过e.target.value拿到了最新的选中值val，完全不需要等待setCountry更新完成再发请求，直接用这个本地变量组装请求参数、调用服务接口即可，从根源上避免“读不到最新状态”的问题。
修改后的核心逻辑示例：

async function onCountrySelected(e){
    const val = e.target.value;
    // 状态更新可以独立调用，不需要await
    setCountry(val);
    
    // 直接使用当前拿到的最新选中值组装参数
    const country = {
        "country": val
    }

    try {
        const data = await getCountryData(country)
        setCountryData(data);
    } catch (error) {
        console.log(error);
    }
}

2. 拆分状态更新与请求逻辑（更符合React数据流规范） #

如果需要严格绑定“选中值变化”和“拉取对应数据”的逻辑，不要把请求写在事件回调里，用useEffect监听状态变化触发请求，让组件形成单向数据流：

• 事件回调只负责更新选中状态
• 状态变更后自动触发数据拉取逻辑
  示例代码：

// 事件回调仅做状态更新
function onCountrySelected(e){
    const val = e.target.value;
    setCountry(val);
}

// 监听选中值变化拉取对应国家数据
useEffect(() => {
    // 跳过默认提示值的无效请求
    if (countryOption === "Select a country") return;
    const fetchCountryInfo = async () => {
        try {
            const data = await getCountryData({ country: countryOption })
            setCountryData(data);
        } catch (err) {
            console.log(err)
        }
    }
    fetchCountryInfo()
}, [countryOption])

3. 补全Select的受控组件绑定 #

原代码的<select>没有绑定value={countryOption}，属于非受控组件，会导致选中状态和React state完全脱钩，需要补充对应的绑定逻辑修正：

<select 
  className="form-control" 
  aria-label="Default select example"  
  value={countryOption}
  onChange={onCountrySelected}
>
  <option>Select a country</option>
  {props.data.map((item, key) => {
    return <option value={item} key={key}>{item}</option>        
  })}
</select>

注意：原来option上的defaultValue是非受控组件的属性，在受控Select中需要换成value属性，否则会出现选中值和渲染内容不匹配的问题。

内容的提问来源于stack exchange，提问作者Anurag Rawal