React Select组件动态设置defaultValue无默认选中问题咨询

问题根因 #

• 误用defaultValue属性：defaultValue仅在组件首次挂载渲染时生效，你的初始状态selectedAccountTypes是空数组，首次渲染时已经将默认值设为空，后续异步更新selectedAccountTypes时，defaultValue不会重新计算赋值。
• 缺少受控组件必要配置：你需要动态控制选中状态的场景下，应该将Select改为受控组件使用，而非非受控的defaultValue模式。

修正方案 #

方案1（推荐：受控组件写法） #

将defaultValue替换为value属性，同时绑定onChange事件同步选中状态：

<Select
  placeholder='First select account above'
  isMulti
  cacheOptions
  value={selectedAccountTypes}
  onChange={(newSelected) => setSelectedAccountTypes(newSelected)}
  options={allAccountTypes}
/>

该方案可以随时通过修改selectedAccountTypes状态动态控制Select的选中项，后续需要调整选中逻辑时灵活性更高。

方案2（非受控组件写法） #

如果不想用受控模式，可以等异步数据加载完成后再渲染Select组件，保证首次渲染时defaultValue已经是正确的全选值：

{
  allAccountTypes.length > 0 && 
  <Select
    placeholder='First select account above'
    isMulti
    cacheOptions
    defaultValue={selectedAccountTypes}
    options={allAccountTypes}
  />
}

补充注意点 #

你代码中调用setSearchedAccount后立即打印searchedAccountValue拿不到最新值，是因为React的状态更新是批量异步执行的，需要在下一次渲染周期才能拿到更新后的状态，这个属于React的基础特性，不影响本次Select的功能逻辑，仅调试时需要注意。

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