如何根据ID匹配条件设置React Select默认预选值

React Select 的defaultValue属性要求传入和options数组内元素结构完全一致的对象，直接用数组原生的find方法遍历匹配id即可，不需要额外手写循环逻辑。

核心实现 #

首先从选项数组中查找id和目标变量id一致的项：

// 查找id匹配的选项
const matchedOption = itemsArray.find(item => item.id === desiredVariable.id)

将查找到的结果直接传入defaultValue属性即可：

<Select
  options={itemsArray}
  defaultValue={matchedOption}
/>

如果没有找到匹配项，find会返回undefined，此时组件会默认展示无选中状态，不会抛出运行报错。

注意事项 #

• 如果你使用的是受控模式（给Select组件绑定了value和onChange属性做状态控制），不要使用defaultValue，把匹配到的matchedOption传给value属性即可
• 如果存在id类型不统一的情况（比如选项id是数字类型，目标变量id是字符串类型），比对时可以统一转成同类型避免匹配失败：

  const matchedOption = itemsArray.find(item => String(item.id) === String(desiredVariable.id))
  

• 常规业务场景下选项列表长度不会过大，find方法的性能完全满足需求，不需要额外做遍历优化。

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