如何为飞机型号/变体/厨房下拉选择列表添加默认选项？

问题说明 #

需要从包含飞机型号（model）、变体（variant）、厨房（galleys）的response数组生成三个下拉选项数组，要求每个数组开头都添加对应的默认选项：

1. 飞机型号列表默认项：「选择飞机型号」
2. 变体列表默认项：「选择变体」
3. 厨房列表默认项：「选择厨房」

原代码在型号列表默认项的处理上存在错误，以下是修正后的实现方案：

原代码问题点 #

1. 拼写错误：resposnse应为response
2. actModel.push()返回的是数组长度，导致actModelArr存储的是数字而非选项对象数组
3. 变体和厨房列表未添加默认选项
4. 厨房列表仅取了response第一个元素的galleys，可能遗漏其他元素的厨房数据，且key存在重复风险

修正后的代码 #

useEffect(() => {
  if (response) {
    // 处理飞机型号选项，拼接默认项
    const modelOptions = [
      { key: 0, label: "选择飞机型号", value: "" }
    ].concat(
      response.map((act, index) => ({
        key: index + 1, // 避免与默认项key重复
        label: act.model,
        value: act.model // 建议使用实际值，空字符串可能影响后续逻辑
      }))
    );

    // 处理变体选项，拼接默认项
    const variantOptions = [
      { key: 0, label: "选择变体", value: "" }
    ].concat(
      response.map((actVr, index) => ({
        key: index + 1,
        label: actVr.variant,
        value: actVr.variant
      }))
    );

    // 处理厨房选项：收集所有厨房数据、可选去重、拼接默认项
    const allGalleys = response.flatMap(gl => gl.galleys);
    // 可选：去重逻辑，避免重复的厨房名称
    const uniqueGalleys = [...new Map(allGalleys.map(item => [item.name, item])).values()];
    const galleyOptions = [
      { key: 0, label: "选择厨房", value: "" }
    ].concat(
      uniqueGalleys.map((cr, index) => ({
        key: index + 1,
        label: cr.name,
        value: cr.name
      }))
    );

    setAircraftOptions({
      model: modelOptions,
      variant: variantOptions,
      galley: galleyOptions
    });
  }
}, [response]);

关键修正说明 #

• 使用concat()合并默认项与生成的选项数组，避免push()返回长度的问题
• 给动态生成的选项key加1，避免与默认项的key=0重复
• 为变体、厨房列表统一添加对应默认选项
• 用flatMap()收集所有response元素中的厨房数据，避免遗漏；可选添加去重逻辑（根据业务需求调整）
• 将value设为实际属性值（如act.model），而非空字符串，便于后续获取选中值

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