react-select设置defaultValue成功但下拉菜单对应选项未高亮如何解决

云原生阿岚

2026-10-1

问题根本原因

react-select 默认使用严格相等运算符===判断选中值和下拉选项是否匹配，当value为对象类型时，哪怕两个对象的内容完全一致，只要不是同一个内存引用，就会被判定为不相等，所以会出现默认值能显示在组件上、但下拉菜单中对应选项无法高亮的问题。

可行解决方案

你可以根据自己的业务场景选择以下任意一种方案：

方案1：自定义相等判断规则（最便捷，无需改动原有数据结构）
给Select组件添加isEqualOption属性，自定义两个选项的匹配逻辑，示例代码如下：

// 自定义相等判断，根据你value的唯一标识param_user比对即可
const isEqualOption = (optionA, optionB) => {
  return optionA?.value?.param_user === optionB?.value?.param_user
}

// 组件上新增属性
<Select 
  onChange={handleChange} 
  options={options} 
  styles={styles} 
  defaultValue={defaultValue}
  isEqualOption={isEqualOption}
/>

方案2：将value改为基本类型（最推荐，性能最优）
把options和defaultValue里的value字段从对象改为字符串、数字等基本类型，比如调整为：
```
const defaultValue = {
  "value": "TEST",
  "label": "TEST"
}
```
同时保证options数组中所有选项的value都对应改为基本类型，默认的相等判断逻辑就能正常生效。
方案3：保证defaultValue和options内选项为同一个引用
直接从options数组中筛选出你需要的默认项作为defaultValue，示例代码：
```
const defaultValue = options.find(item => item.value.param_user === 'TEST')
```
这样两个对象是同一个内存引用，默认的===判断就能命中，下拉选项自然会高亮。