React中保留对象数组适配组件，转换为数据库所需true键值对的方法

你不需要改动适配React组件的原始options结构，最优实现方式就是按照UI渲染、数据提交的流程拆成两步跑，全程不破坏组件交互逻辑。

拆分两步的合理性 #

你保留带label的option结构本来就是为了给选择类React组件做渲染用，如果强行把结构改成提交需要的键值对格式，会导致组件拿不到显示文案，还要额外转回来，平白增加性能损耗。
拆分后各层职责完全独立：

• UI交互层：直接用你现有的原始options数组，通过组件回调拿到用户选中的内容（通常是选中值组成的数组，比如['strawberry', 'watermelon']）
• 数据提交层：在发请求到数据库前，单独跑转换逻辑生成要求的格式，后续要改提交格式也不用动组件代码

具体转换代码 #

根据组件返回的选中内容类型不同，适配逻辑分两种常见场景：

场景1：组件返回选中值的数组 #

大部分React多选组件的默认返回格式就是纯value数组，比如selectedValues = ['strawberry', 'watermelon', 'pear']，可以用两种简洁写法实现转换：

• 用reduce遍历累加生成对象

const buildSubmitPayload = (selectedValues) => {
  return selectedValues.reduce((payload, value) => {
    payload[value] = true
    return payload
  }, {})
}

• 用Object.fromEntries简化代码

const buildSubmitPayload = (selectedValues) => {
  return Object.fromEntries(selectedValues.map(value => [value, true]))
}

场景2：组件直接返回完整的选中option对象 #

如果你的组件回调直接返回带label的option对象数组，比如selectedOptions = [{label: "Strawberry 🍓", value: "strawberry"}, ...]，只要在转换时取到每个对象的value字段即可：

const buildSubmitPayload = (selectedOptions) => {
  return selectedOptions.reduce((payload, option) => {
    payload[option.value] = true
    return payload
  }, {})
}

实际转换效果 #

当用户选中全部三个选项时，上述函数输出的结构完全符合提交要求：

{
  strawberry: true,
  watermelon: true,
  pear: true
}

注意：JS对象的键天然具有唯一性，即使传入的选中值存在重复，也不会生成重复键，不需要额外做去重处理。

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