如何解决React中同一函数内setState异步与API调用的冲突？

方法一：直接使用事件对象中的值 #

由于setProvinceID是异步更新，同一函数内直接访问provinceID拿到的是更新前的旧值。你可以直接用e.target.value作为API请求参数，无需等待state更新：

function handleProvince(e){
  const selectedProvinceID = e.target.value;
  setProvinceID(selectedProvinceID);
  axios.get(`http://192.168.18.46/api/regency/${selectedProvinceID}`).then((res)=>{
    setRegency(res.data.data);
  });
}

方法二：用useEffect监听state变化 #

如果后续逻辑依赖provinceID的state值，或者需要在provinceID更新后执行额外操作，可以通过useEffect监听其变化，触发API请求：

首先引入useEffect：

import { useEffect } from 'react';

添加监听逻辑：

useEffect(() => {
  // 过滤初始空值，避免无效请求
  if (provinceID) {
    axios.get(`http://192.168.18.46/api/regency/${provinceID}`).then((res)=>{
      setRegency(res.data.data);
    });
  }
}, [provinceID]); // 仅当provinceID变化时执行

// 修改handleProvince，只负责更新state
function handleProvince(e){
  setProvinceID(e.target.value);
}

两种方法都能解决“两次选择才获取正确值”的问题，第一种更直接，第二种适合存在state依赖的复杂场景。

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