React-Select选中值后下拉选项无可用数据，如何处理其他组件prop适配选项结构

问题原因 #

React-Select 默认采用value字段作为选项的唯一标识，用于区分已选/未选选项。你自定义的options结构中仅包含id、label、name三个字段，缺失了组件默认依赖的value字段。当你选中任意选项后，组件在过滤已选选项的逻辑中会错误将所有选项判定为已选中，最终导致下拉列表无数据展示。

解决方法 #

你可以任选以下两种方案之一修复问题：

方案1：对齐默认规则，补充value字段 #

调整你的options处理逻辑，新增value字段赋值即可，同时可以优化冗余的数组操作代码：

const labelOptionsProcessed = labelOptions.map(item => ({
  id: item.id,
  value: item.id, // 按组件默认规则补充value字段，可根据需求赋值为item.name或其他唯一值
  label: item.name,
  name: item.name
}))

方案2：自定义匹配规则，无需修改原有结构 #

如果不想改动现有options结构，可以给Select组件传入getOptionValue属性，指定用已有id字段作为选项的唯一匹配标识：

<Select
  options={labelOptionsProcessed}
  isMulti
  getOptionValue={(option) => option.id}
></Select>

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