NextJS 13.4.7+React中如何通过API更新select字段数据？

核心问题分析 #

1. 普通变量无法触发React重渲染：你用let selectedDistricts声明的是普通变量，React不会追踪它的变化，就算重新赋值，组件也不会重新渲染，所以select的选项不会更新。
2. Promise赋值错误：GetDistrictsAPI返回的是Promise，你直接把整个Promise赋值给selectedDistricts，此时它已经不是原来带data属性的对象，自然访问selectedDistricts.data会得到undefined。

具体修正步骤 #

1. 改用React状态管理

把普通变量换成useState状态，让React能追踪变化并触发重渲染：

import { useState } from 'react';

// 初始化状态
const [selectedDistricts, setSelectedDistricts] = useState({ 
  "data": [{ dist_id: '0', name: 'Select a Province first' }] 
});

2. 修正异步API调用逻辑

在handleDistricts里正确处理异步请求，等待API返回后用状态更新函数修改selectedDistricts：

async function handleDistricts() {
  console.log('Province passed = ' + passedProvID);
  try {
    const data = await GetDistrictsAPI(passedProvID);
    console.log('Province District Data is ', data);
    // 用setter更新状态
    setSelectedDistricts(data);
  } catch (error) {
    console.error('获取区县数据失败:', error);
    // 出错时重置默认提示
    setSelectedDistricts({ "data": [{ dist_id: '0', name: '获取区县数据失败' }] });
  }
}

3. 调整触发时机（关键）

原来的onChange绑定在区县select上是错误的，应该是当省份select的选项变化时调用handleDistricts，比如在省份select组件中：

// 省份select的onChange事件
<Field
  as="select"
  id="pxProvince"
  name="pxProvince"
  onChange={(e) => {
    setFieldValue('pxProvince', e.target.value);
    // 选择省份后调用获取区县的方法
    handleDistricts();
  }}
>
  {/* 省份选项 */}
</Field>

区县select的onChange只处理选中值的更新即可：

<Field
  as="select"
  id="pxDistrict"
  name="pxDistrict"
  disabled={!values.pxProvince}
  onChange={(e) => {
    setFieldValue('pxDistrict', e.target.value);
  }}
  className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
>
  {selectedDistricts.data.map((p) => (
    <option key={p.dist_id} value={p.dist_id}>{p.name}</option>
  ))}
</Field>

注意：把key从索引i换成p.dist_id，避免因数组顺序变化导致的React渲染问题，符合最佳实践。

补充说明 #

你之前赋值给districts能看到数据，是因为只是把Promise实例赋值给了这个普通变量，then里能打印出数据，但它同样不会触发组件重渲染，且没用到select选项渲染中，所以页面不会有变化。

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