react-select作为子组件调用时defaultValue不生效问题如何解决？

问题根因 #

你遇到的问题是react-select的两个底层特性共同导致的：

1. defaultValue 仅在组件首次挂载阶段生效，后续无论options或者defaultValue本身怎么更新，都不会重新触发默认值匹配逻辑
2. defaultValue 和options内的选项是做引用相等性判断，不是值对比。你手写的{ value: "strawberry", label: "Strawberry" }和父组件传递的options里的同值选项是两个独立对象，引用地址不同，所以组件识别不到匹配的默认选项。
   如果你的options是父组件异步获取后传入的，那首次渲染Select时options还为空，也会导致默认值匹配失败。

解决方案 #

方案1：改用受控组件实现（最稳妥，适配所有场景） #

用value属性替代defaultValue，手动维护选中状态，不受渲染时机和引用的限制：

// Dropdown.js 示例代码
import { useState, useEffect } from 'react';
import Select from 'react-select';

const Dropdown = ({ options }) => {
  const [selected, setSelected] = useState(null);

  // 监听options变化，匹配默认选项
  useEffect(() => {
    const defaultOpt = options.find(item => item.value === 'strawberry');
    if (defaultOpt) setSelected(defaultOpt);
  }, [options]);

  return (
    <Select
      value={selected}
      onChange={setSelected}
      options={options}
    />
  )
}

方案2：保持非受控模式，调整默认值取值逻辑 #

如果不想改受控组件，就保证默认值和options内的选项引用一致，同时等options加载完成再渲染Select：

// Dropdown.js 示例代码
import Select from 'react-select';

const Dropdown = ({ options }) => {
  // 直接从传入的options里取默认选项，保证引用一致
  const defaultValue = options.find(item => item.value === 'strawberry') ?? null;

  // options未加载完成时不渲染Select，保证首次挂载就能匹配到默认值
  if (!options.length) return <div>加载中...</div>;

  return (
    <Select
      defaultValue={defaultValue}
      options={options}
    />
  )
}

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