react-select首次选择不更新选中值 正确状态设置及绑定问题排查

状态设置的正确方式 #

react-select的状态绑定需要和option结构严格匹配，分为两种常用写法：

• 存储选中值的基础类型（字符串/数字）
  1. 状态初始化和option的value属性类型保持一致，比如option的value为字符串时，初始化写法为const [department, setDepartment] = useState('')
  2. onChange回调中取返回对象的value属性更新状态：onChange={selectedValue => setDepartment(selectedValue.value)}
  3. Select组件的value属性直接绑定状态变量：value={department}
• 存储完整的option对象
  1. 状态初始化可设为null：const [selectedDepart, setSelectedDepart] = useState(null)
  2. onChange回调中直接用返回的对象更新状态：onChange={selectedValue => setSelectedDepart(selectedValue)}
  3. Select组件的value属性绑定完整对象：value={selectedDepart}

绑定失效的常见原因 #

1. 类型不匹配：检查results中depart.name的类型，如果是数字类型，和初始化的空字符串类型不一致，react-select无法匹配到对应option，就会出现选中后不显示的问题
2. 异步加载异常：如果results是接口异步返回的数据，首次渲染时options为空数组，状态更新后options还未加载完成，也会导致匹配失败
3. key值不稳定：使用数组index作为option的key，如果results数组有增删排序的操作，key值变动会导致组件重新渲染时匹配失效，建议用depart.name或者数据唯一id作为key
4. 重复value值：多个option配置了相同的value属性，react-select无法定位到正确的选中项，导致显示异常
5. 副作用冲突：可先注释掉onChange中的setFilter调用，仅保留setDepartment测试是否正常，如果恢复正常说明setFilter逻辑中存在重置department的操作，引发状态覆盖

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