Async react-select 动态加载options时defaultValue不生效问题求解

defaultValue 仅在 React Select 组件首次挂载时生效，首次渲染时 API 还未返回数据，myOptions 为空，因此 defaultValue 被初始化为 undefined，后续数据加载完成后 React Select 不会重新读取更新后的 defaultValue，和你推测的内部 memoization 机制一致。
另外注意开启 isMulti 配置时，默认值必须传入数组，单个对象会直接不生效，这个是常见的隐藏坑。

方案1：添加key属性强制重新挂载（最简单） #

通过给组件绑定动态key，当options加载完成后key变化，触发组件重新挂载，此时新的defaultValue会生效：

// myOptions会在API请求返回后填充数据，并通过useEffect触发组件重渲染
const [myOptions, setMyOptions] = useState()
// 假设默认选中的id从props传入
const { targetDefaultId } = props

<AsyncCreatableSelect
  {/* 数据加载完成后key变化，触发组件重挂载 */}
  key={myOptions ? `select-loaded-${targetDefaultId}` : 'select-loading'}
  {/* 开启isMulti时默认值要包在数组里 */}
  defaultValue={myOptions?.find(opt => opt._id === targetDefaultId) ? [myOptions.find(opt => opt._id === targetDefaultId)] : []}
  defaultOptions={myOptions}
  onChange={selectHandler}
  isMulti
  isSearchable
  {/* 如果你的option标识字段不是默认的value，要加这两个配置 */}
  getOptionValue={opt => opt._id}
  getOptionLabel={opt => opt.label}
/>

方案2：改为受控组件（最可控） #

不用defaultValue，改用value属性自己管理选中状态，灵活适配动态数据：

const [myOptions, setMyOptions] = useState()
const [selectedVal, setSelectedVal] = useState([])
const { targetDefaultId } = props

// 数据加载完成后自动设置默认值
useEffect(() => {
  if (!myOptions || !targetDefaultId) return
  const targetOpt = myOptions.find(opt => opt._id === targetDefaultId)
  if (targetOpt) {
    // 非多选模式直接传targetOpt即可
    setSelectedVal([targetOpt])
  }
}, [myOptions, targetDefaultId])

const selectHandler = (newVal) => {
  setSelectedVal(newVal)
  // 原有业务逻辑
}

<AsyncCreatableSelect
  value={selectedVal}
  defaultOptions={myOptions}
  onChange={selectHandler}
  isMulti
  isSearchable
  getOptionValue={opt => opt._id}
  getOptionLabel={opt => opt.label}
/>

方案3：通过ref手动调用setValue #

拿到组件实例后手动触发赋值，适合不想改组件受控逻辑的场景：

const selectRef = useRef(null)
const [myOptions, setMyOptions] = useState()
const { targetDefaultId } = props

useEffect(() => {
  if (!selectRef.current || !myOptions || !targetDefaultId) return
  const targetOpt = myOptions.find(opt => opt._id === targetDefaultId)
  if (targetOpt) {
    // 非多选模式直接传targetOpt即可
    selectRef.current.setValue([targetOpt])
  }
}, [myOptions, targetDefaultId])

<AsyncCreatableSelect
  ref={selectRef}
  defaultOptions={myOptions}
  onChange={selectHandler}
  isMulti
  isSearchable
  getOptionValue={opt => opt._id}
  getOptionLabel={opt => opt.label}
/>

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