React Select存在相同value选项时选中即全部消失的兼容实现方案

核心问题原因 #

React Select默认以value字段作为选项的唯一判定标识，你的多个选项value重复，会被默认判定为同一个选项，才会出现选中一个所有同value选项都消失的问题。

解决方案 #

你需要额外添加getOptionValue属性指定选项的唯一标识为id，同时调整isOptionSelected的匹配逻辑即可，不需要修改其他原有配置，修改后的完整组件配置如下：

<Select
  {...props}
  controlShouldRenderValue={!isMulti}
  isMulti={true}
  styles={{
    menu: (provided) => ({ ...provided, zIndex: 9999 })
  }}
  hideSelectedOption={true}
  // 新增：指定id作为选项唯一标识，替换默认的value字段
  getOptionValue={(option) => option.id}
  // 修改：根据唯一id判断是否选中，避免对象引用不同导致匹配失效
  isOptionSelected={(option, selectedValue) => 
    selectedValue.some(selected => selected.id === option.id)
  }
/>

配置说明 #

1. getOptionValue是React Select内部用于识别选项唯一性的核心属性，默认返回option.value，你把它改成返回唯一的id后，内部逻辑就不会把value相同的选项判定为同一个。
2. 之前你的isOptionSelected用i === option判断，依赖对象引用完全一致，如果你的options数组是动态生成/重新渲染时重新声明的，即使内容完全相同的两个选项对象引用也会不同，就会出现匹配不到已选中项的问题，改成根据id匹配可以完全避免这个问题。
3. 保留hideSelectedOption={true}即可，这个属性会自动根据isOptionSelected的返回结果过滤已选中的选项，只会隐藏你实际选中的那一个，不会影响其他value相同但id不同的选项。

注意：该配置修改不会影响你最终拿到的选中项数据结构，getOptionValue仅作用于组件内部的选项识别逻辑，你获取到的选中值仍然是完整的option对象。

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