React项目中无法从数据库填充Select列表的问题排查

代码存在的核心问题 #

你的代码里setOptions的执行时机错误。GetWithAuth发起的是异步请求，.then()里的回调会在请求完成后才执行，但你在.then()链外部直接调用setOptions——此时results数组还没被API返回的数据填充，最终options里只有默认的{key: 'Select a category', value: ''}这一项。

修复方案 #

方案1：使用async/await简化异步逻辑（推荐） #

既然fetchData已声明为async函数，直接用await处理异步请求，让逻辑更线性清晰：

const [options, setOptions] = useState([]);

useEffect(() => {
  async function fetchData() {
    // 等待请求完成并解析JSON
    const res = await GetWithAuth("/categories");
    const value = await res.json();
    
    // 直接用map生成目标数组，无需额外的results变量
    const categoryOptions = value.map(element => ({
      key: element.name,
      value: element.id,
    }));
    
    // 填充options
    setOptions([
      {key: 'Select a category', value: ''},
      ...categoryOptions
    ]);
  }

  fetchData();
}, []);

方案2：将setOptions移到.then回调内部 #

如果坚持使用.then()链，必须把setOptions放在最内层回调里，确保数据获取完成后再更新状态：

const [options, setOptions] = useState([]);

useEffect(() => {
  async function fetchData() {
    GetWithAuth("/categories")
    .then(res => res.json())
    .then(value => { 
      const categoryOptions = value.map(element => ({
        key: element.name,
        value: element.id,
      }));
      // 数据处理完成后再更新状态
      setOptions([
        {key: 'Select a category', value: ''},
        ...categoryOptions
      ]);
    });
  }

  fetchData();
}, []);

额外优化建议 #

• 添加请求错误处理，避免请求失败时无反馈：

  async function fetchData() {
    try {
      const res = await GetWithAuth("/categories");
      if (!res.ok) throw new Error('请求失败');
      const value = await res.json();
      // ... 后续处理
    } catch (err) {
      console.error('获取分类数据失败:', err);
      // 可在此设置错误状态，提示用户
    }
  }
  

• 确认key和value字段是否匹配你使用的Select组件要求（比如原生HTML的select需要text作为显示文本，部分UI组件要求label替代key，需对应调整）。

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