MultiSelect多选提交数据格式不符，如何转换为后端要求的结构

问题根因 #

你当前的赋值逻辑是把选中的所有ID组成的数组，直接塞给了单个对象的vehicleAliasId字段，所以才会生成嵌套数组的错误结构。你需要把每个选中的ID单独包装成一个对象，再组成数组提交。

修正后的代码 #

1. 修正工具函数的拼写和逻辑错误

你原来的代码存在拼写错误、循环空数组、映射方向颠倒的问题，修正后如下：

// 原来函数名拼写少了l，修正为getSelectedVehicles
const getSelectedVehicles = (selectedvehicles: any[]) => {
    const items = new Map<string, string>();
    vehicleListData.forEach((item) => {
      items.set(item.vehicleName, item.vehicleAliasId);
    });
    return selectedvehicles.map(item => items.get(item) || '');
};

// 原来参数名少了s，且映射方向错误，修正后支持回显
const prepareSelectedVehiclesServices = (selectedVehicles: any[]) => {
    const items = new Map<string, string>();
    vehicleListData.forEach((item) => {
      // 回显需要把后端返回的vehicle_id转回下拉框需要的vehicleName
      items.set(item.vehicleAliasId, item.vehicleName);
    });
    // 提取后端返回的每个对象里的vehicle_id做转换
    return selectedVehicles.map(item => items.get(item.vehicle_id) || '');
};

2. 核心修改多选框的赋值逻辑

把原来的单对象嵌套数组，改成每个ID对应一个对象的结构：

<MultiSelect
  items={pickerOptions.vehicleServices}
  onSelectedItemsChange={(Ids: any[]) => {
    const selectedVehiclesServices = getSelectedVehicles(Ids);
    // 遍历每个选中ID，生成符合要求的对象数组
    const formattedData = selectedVehiclesServices.map(id => ({
      vehicle_id: id
    }))
    formikData.setFieldValue(`vehicles`, formattedData);
  }}
  selectedItems={{
    selectedItemIdentifiers: prepareSelectedVehiclesServices(
      formikData.values.vehicles || [],
    ),
  }}
></MultiSelect>

关键修改说明 #

• 提交时通过map遍历每个选中ID，逐个生成{vehicle_id: 单个ID}的对象，最终输出的数组完全符合后端要求的格式
• 修正了回显逻辑的映射方向，确保编辑场景下多选框可以正确展示已选中的选项
• 修复了原代码中的拼写错误、空循环问题，避免运行时报错

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