React中加载联动下拉列表后无法设置region默认值的问题

问题出在哪 #

1. 异步状态更新时机错误：你在监听input.country的useEffect里，调用fetchRegions后立刻判断regionData.length并尝试设置region。但fetchRegions是异步操作，setRegionData不会立即更新regionData的状态，此时regionData还是旧值，导致设置region的代码根本不会触发。
2. 闭包导致旧状态引用：该useEffect的依赖数组只添加了input.country，但函数内部用到了input和regionData，这会让你拿到组件上一次渲染的旧状态，即便后续regionData更新，也不会重新执行设置逻辑。

修复方案 #

1. 将设置region的逻辑移到fetchRegions内部

当成功获取到地区数据后，直接在fetchRegions里更新input的region值，确保使用最新的地区数据，同时用函数式更新避免闭包问题：

async function fetchRegions() {
  const response = await LocationService.getRegionsByCountryCode(input["country"]);
  if (response?.ok) {
    const responseData = await response.json() as RegionResponse[];
    const regions = LocationService.maptoRegionSelectList(responseData);
    setRegionData(regions);
    setRegionLoaded(true);
    // 加载完成后自动选中第一项
    if (regions.length > 0) {
      setInput(prevInput => ({ ...prevInput, region: regions[0].value }));
    }
  }
}

2. 优化useEffect逻辑

清理原useEffect中无效的设置代码，同时在切换国家时重置region相关状态，避免显示旧数据：

useEffect(() => {
  // 切换国家时重置region状态
  setRegionLoaded(false);
  setRegionData([]);
  setInput(prev => ({ ...prev, region: "" }));
  fetchRegions();
}, [input["country"]]);

3. 可选：统一使用函数式更新input

为避免其他场景下的闭包问题，把handleSelectChange也改成函数式更新：

function handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {
  const { name, value } = event.target;
  setInput(prevInput => ({ ...prevInput, [name]: value }));
}

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