React下拉框无法绑定新格式WebAPI数据的问题排查

问题原因 #

1. 状态赋值错误：新API直接返回数组，不再嵌套在data字段里，原代码setAdmins(response.data.data)会取到undefined，导致admins始终是空数组，下拉框自然没有数据。
2. 渲染代码存在多处bug：
   • map回调里没有返回option元素，React无法渲染任何内容
   • 变量名混乱：把循环参数data错写成admin，还错误访问了admins.name（应该用当前项的data.name）
   • option标签未正确闭合
   • 缺少React列表渲染必须的key属性
   • 原代码里的setAdmin是笔误，应该是setAdmins，否则状态根本不会更新

修复方案 #

1. 修正API数据赋值逻辑

把状态赋值的代码改成直接使用response.data，因为新API返回的数组就存在这里：

setAdmins(response.data);

2. 修复下拉框渲染代码

修正变量名、添加返回逻辑、闭合标签、补充key属性，同时修正状态更新函数的笔误。

修复后的完整代码示例 #

import { useState, useEffect } from 'react';

function AdminSelect() {
  // 修正笔误：setAdmin → setAdmins
  const [admins, setAdmins] = useState([]);

  useEffect(() => {
    getAdmins();
  }, []);

  const getAdmins = () => {
    adminGroups.GetAllAdmins()
      .then((response) => {
        // 直接使用API返回的数组
        setAdmins(response.data);
      })
      .catch((error) => {
        // 建议添加错误捕获，方便排查问题
        console.error('获取管理员数据失败:', error);
      });
  };

  return (
    <select>
      <option value="">请选择管理员</option>
      {admins.map((item) => (
        // 添加key属性，修正变量访问，闭合标签
        <option key={item.id} value={item.id}>
          {item.name}
        </option>
      ))}
    </select>
  );
}

export default AdminSelect;

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