React调用API获取数据填充select下拉框无选项问题求解

AI 小北

2026-10-8

问题根因

核心问题是<option>节点没有作为子元素放入类型为select的<AvInput>标签内部，当前你把option写在了AvInput的同级位置，浏览器无法将其识别为下拉框的选项
useState初始值设为null也会导致首次渲染时没有列表，虽然接口返回后会触发重渲染，但因为option位置不对所以依然无法生效
额外注意变量名intergrationLevel存在拼写错误（正确应为integrationLevel），避免后续出现其他引用错误

修正方案

直接修改代码如下即可：

1. 调整state初始化

// 把初始值从null改成空数组，避免空判断同时防止map调用报错
const [intergrationLevel, setIntegrationLevel] = useState<any[]>([]);

2. 调整下拉框渲染逻辑

注意要把原来自闭合的<AvInput />改成带结束标签的格式，将option作为子元素放入：

<div className="col-md-4">
  <AvGroup>
    <Label>Level</Label>
    <AvInput
      id="integration-level"
      data-cy="integration-level"
      type="select"
      className="form-control"
      name="realm"
    >
      {intergrationLevel.map(int => (
        <option value={int.cod} key={int.cod}>
          {int.cod}
        </option>
      ))}
    </AvInput>
  </AvGroup>
</div>