React-Select组件无法设置defaultValue问题咨询

我按照官方文档操作，给React-Select组件设置defaultValue，但始终不生效。

我的Select组件代码如下：

<Select
  styles={selectStyles}
  closeMenuOnSelect={false}
  isMulti
  placeholder={t('filter.clinicsSelect')}
  options={paidVisitsOptions}
  defaultValue={transformedDefaultOptions}
  onChange={(event) => clinicsFilterHandler(event)}
  theme={(theme) => ({
    ...theme,
    colors: {
      ...theme.colors,
      primary: colors.primary,
    },
  })}
/>

绑定到defaultValue的变量定义：

const transformedDefaultOptions = defaultOptions.map((option) => ({
  value: option,
  label: option,
}));

控制台打印transformedDefaultOptions已有预期结果，但defaultValue仍不生效，请问哪里操作有误？

可能的问题点： #

• 选项引用/结构不匹配：React-Select识别选中项时，要求defaultValue里的对象必须和options数组中的对象引用一致，或者每个字段完全匹配。如果paidVisitsOptions是预先定义的对象数组，而你通过map生成了全新的transformedDefaultOptions对象（即使值相同），组件会认为这是不同的选项。正确做法应该是从paidVisitsOptions中筛选出符合defaultOptions值的项，比如：

  const transformedDefaultOptions = paidVisitsOptions.filter(opt => 
    defaultOptions.includes(opt.value)
  );
  

• 默认值不在可选列表中：检查defaultOptions中的每个值，是否都能在paidVisitsOptions的value字段中找到对应项。如果某个值不存在，该选项无法被选中。
• 混淆受控/非受控模式：如果你的组件通过onChange维护了筛选状态，此时应该使用value属性而非defaultValue——defaultValue仅在组件初始渲染时生效，后续状态更新需要绑定value到状态变量。
• isMulti模式格式：开启isMulti后，defaultValue必须是数组格式（你的代码已满足），但要确保数组不为空且每个元素结构正确。

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