如何用Axios请求返回数据填充React下拉框并解决map报错问题

• 异步逻辑处理错误：DIDataService.findAllPresets()是异步请求方法，返回的是Promise对象，你最初的代码没有等待请求完成就直接将Promise赋值给presets状态，非数组类型调用map方法自然会抛出类型错误。
• 字段不匹配：后端返回的数组项字段为presetName、presetValue、id，你最初的渲染逻辑直接读取item.value和item.label，字段不存在会导致渲染异常。

你更新后的useEffect逻辑已经解决了核心的异步处理和字段映射问题，补充少量边界处理就能稳定运行，完整可运行代码如下：

import DIDataService from "../services/DIService";
import React from "react";

const PresetDropDown= () => {
  const [presets, setPresets] = React.useState([]);

  React.useEffect(() => {
    async function getPresets() {
      try {
        const response = await DIDataService.findAllPresets()
        // 映射后端字段为前端需要的格式，同时做空值兜底
        const formattedPresets = (response.data || []).map(({ presetName, presetValue, id }) => ({ 
          label: presetName, 
          value: presetValue,
          id
        }));
        setPresets(formattedPresets);
      } catch (e) {
        console.log("拉取预设选项失败：", e);
      }
    }
    getPresets();
  }, []);

  return (
    <select>
      {/* 可选链兜底，避免极端场景下报错 */}
      {presets?.map(item => (
        <option
          key={item.id} // 用后端返回的唯一ID作为key，比value更稳妥，避免重复值导致渲染异常
          value={item.value}
        >
          {item.label}
        </option>
      ))}
    </select>
  );
}

export default PresetDropDown;

如果你偏好then链式写法，你更新后的代码仅需做两处微调即可：

1. 给response.data加空值兜底：(response.data || []).map(...)，避免接口返回异常时代码报错
2. 将option的key替换为item.id，避免存在相同value的选项时出现渲染异常

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