React中Select表单onChange始终返回数组前一个对象的问题

核心原因 #

React的状态更新（setState）是异步的。你在调用setRegionId(e.target.value)后立刻使用regionId，此时状态还没完成更新，拿到的始终是上一次的旧值：

• 首次点击时，regionId初始为undefined，所以会把undefined传给retrieveRegion，触发API 404；
• 后续点击时，regionId还没更新到当前选中值，所以打印和接口调用都用的是上一次的id。

解决方案 #

方案1：直接使用事件对象中的最新值

既然点击事件里已经能拿到最新的选中id，直接用这个值执行后续操作即可：

const handleRegionChange = (e) => {
  const selectedRegionId = e.target.value;
  setRegionId(selectedRegionId);
  retrieveRegion(selectedRegionId);
  console.log(selectedRegionId);
}

方案2：用useEffect监听状态变化

如果业务逻辑必须依赖regionId状态完成更新后再执行，可以通过useEffect监听regionId的变化：

const handleRegionChange = (e) => {
  setRegionId(e.target.value);
}

// 当regionId变化时执行
useEffect(() => {
  // 过滤初始的undefined状态，避免无效调用
  if (regionId) {
    retrieveRegion(regionId);
    console.log(regionId);
  }
}, [regionId]);

额外优化点 #

1. JSX中需用className替代class（React的属性规范）；
2. 给初始选项设置空值value=""，并绑定value到regionId，让下拉框状态和React状态保持同步：

<Form>
  <select className="form-control" onChange={handleRegionChange} value={regionId || ""}>
    <option value="">Select a Region</option>
    {regions.map((region) => 
      <option
        value={region.id}
        key={region.id}
      >
        {region.country}
      </option>
    )}
  </select>
</Form>

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