React-Select多选组件：如何根据ID预加载显示对应名称？

问题场景 #

使用react-select多选组件时，提交POST/PUT请求需要向API发送ID（如65a531c7e04e780a3a702fdd），但组件要显示对应的名称。编辑条目时，API返回的仅为ID数组（如sideFoods、extras、menuIds等字段），导致预加载时组件显示ID而非名称；同时选择选项时也显示ID，改为传label则数据库不接受。

API返回数据示例 #

"data": {
  "_id": "65db636adc11e7260bd8f27e",
  "nameOfFood": "Hanae Vance",
  "kitchenId": "65a52c333972416e3ef579af",
  "dishTypeId": "65a52cbf3972416e3ef57ba8",
  "image": "https://pocketfood.s3.us-east-2.amazonaws.com/image/undefined/1708876620.jpeg",
  "description": "Nulla ipsam nihil la",
  "pricePerServing": 2000,
  "available": true,
  "isRecommendation": false,
  "mustHaveSideFood": true,
  "sideFoods": [
    "65a531c6e04e780a3a702fc6"
  ],
  "compulsoryExtras": true,
  "extras": [
    "65a531c7e04e780a3a702fcc"
  ],
  "menuIds": [
    "65a52d183972416e3ef57d3a"
  ],
  "foodTags": [
    "65a52c373972416e3ef57a30"
  ],
  "allergies": [],
  "isSpecial": false,
  "createdAt": "2024-02-25T15:57:30.931Z",
  "updatedAt": "2024-02-25T15:57:30.931Z",
  "__v": 0
}

已尝试的方法 #

• 直接将ID映射为label和value，导致组件显示ID
• 通过ID匹配获取名称，但返回空值
• 请求后端返回名称+ID组合，仍无法正确获取对应名称

当前代码 #

onChange 处理函数 #

const handleChange = (newValue: any, actionMeta: ActionMeta<Options>) => {
  if (actionMeta.name === "foodTags") {
    setFoodInput((prevDetails: any) => ({
      ...prevDetails,
      foodTags: newValue ? newValue.map((option: any) => option.value) : [],
    }));
  } else if (actionMeta.name === "menuIds") {
    setFoodInput((prevDetails: any) => ({
      ...prevDetails,
      menuIds: newValue ? newValue.map((option: any) => option.value) : [],
    }));
  } else if (actionMeta.name === "extras") {
    setFoodInput((prevDetails: any) => ({
      ...prevDetails,
      extras: newValue.map((option: any) => option.label),
    }));
  } else if (actionMeta.name === "sideFoods") {
    setFoodInput((prevDetails: any) => ({
      ...prevDetails,
      sideFoods: newValue.map((option: any) => option.value),
    }));
  }
};

React-Select 组件代码 #

<Select
  options={menuOption}
  key={menu?._id}
  className="basic-multi-select"
  classNamePrefix="select"
  name="menuIds"
  isMulti
  onChange={handleChange}
  // value={foodInput?.menuIds?.map((menu: any) => ({
  //   label: menu,
  //   value: menu,
  // }))}
  // value={menuOption.filter((option) =>
  //   foodInput?.menuIds?.includes(option.value)
  // )}
  value={foodInput?.menuIds?.map((menuId: any) => ({
    label: menu.find((m: any) => m._id === menuId)?.title,
    value: menuId,
  }))}
  styles={customStyles}
/>

解决方案 #

1. 标准化选项数据格式 #

确保所有react-select的options数组（如menuOption、sideFoodsOptions等）都遵循{ label: 显示名称, value: ID }的结构，比如：

// 示例：从后端获取菜单数据后转换为选项格式
const menuOption = menu.map(item => ({
  label: item.title, // 对应显示的名称字段
  value: item._id    // 对应提交的ID字段
}));

2. 正确处理预加载的value值 #

放弃手动map生成label的方式，直接从已有的options数组中筛选匹配ID的选项，避免数据未加载完成或字段不匹配导致的空值问题：

<Select
  options={menuOption}
  key={menu?._id}
  className="basic-multi-select"
  classNamePrefix="select"
  name="menuIds"
  isMulti
  onChange={handleChange}
  // 核心修改：从menuOption中筛选出匹配foodInput.menuIds的选项
  value={menuOption.filter(option => foodInput?.menuIds?.includes(option.value))}
  styles={customStyles}
/>

3. 统一onChange逻辑，确保提交ID #

修正extras字段的处理（当前代码中传的是label，不符合要求），统一将所有字段的选中值转换为ID数组存入state：

const handleChange = (newValue: any, actionMeta: ActionMeta<Options>) => {
  const fieldName = actionMeta.name;
  setFoodInput(prev => ({
    ...prev,
    [fieldName]: newValue ? newValue.map(opt => opt.value) : []
  }));
};

4. 确保选项数据提前加载 #

在组件渲染前，确保所有需要的选项数据（如menu、extrasList等）已经加载完成，避免因数据未就绪导致筛选时找不到匹配项。可以用条件渲染控制select组件的显示：

{menuOption.length > 0 ? (
  <Select
    // ...其他属性
  />
) : (
  <div>加载中...</div>
)}

解决选择时显示ID的问题 #

该问题根源是options数组的label字段未正确设置，只要确保options的每个元素都包含正确的label（显示名称）和value（ID），选择后组件就会自动显示label，而提交时通过onChange存的是value（ID），完全符合数据库要求。

内容的提问来源于stack exchange，提问作者Olaoluwa Anigboro-Napoleon