MUI步进器结合Formik时react-select切换步骤后不回显已存值

• react-select是强受控组件，不会自动根据name属性读取Formik上下文字段值，你没有手动给组件传入value属性，组件重挂载后没有合法数据源渲染已选项。
• 你存入Formik的selectedFields是原始业务字段数组，仅包含field_id、field_name属性，和react-select要求的选中值结构（必须和options项结构一致，包含value、label字段）不匹配，就算传值格式不对也无法识别。
• 首次选择时能正常显示，是因为onChange触发阶段组件临时持有了选中项的引用；MUI Stepper默认会卸载非激活步骤的DOM，切走步骤再切回时组件重新挂载，临时引用丢失，又没有合法value传入，就只会显示占位符。

1. 用useMemo缓存options数组，避免每次渲染生成新数组引用导致匹配异常
2. 给react-select传入格式正确的value属性，把Formik存储的原始字段数组转换成react-select识别的{value, label}结构
3. 自定义getOptionValue匹配逻辑，用唯一主键做匹配，避免对象引用不一致导致的识别失败

修复后的代码如下：

import { useMemo } from 'react';
import { useFormik } from 'formik';
import ReactSelect from 'react-select';

// 组件内部
const myFields = [
  { field_id: 0, field_name: 'field_name_0' },
  { field_id: 1, field_name: 'field_name_1' },
  { field_id: 2, field_name: 'field_name_2' },
  { field_id: 3, field_name: 'field_name_3' },
  { field_id: 4, field_name: 'field_name_4' },
  { field_id: 5, field_name: 'field_name_5' },
];

// 缓存选项，避免重复生成
const fieldOptions = useMemo(() => myFields.map(field => ({
  value: field,
  label: field.field_name
})), [myFields]);

// 从Formik实例取值，如果你用<Formik>组件的render props写法，直接从props里取values和setFieldValue即可
const { values, setFieldValue } = useFormik(/* 原有formik配置 */);

<ReactSelect
  isMulti
  name="selectedFields"
  id="sel"
  placeholder="Fields"
  options={fieldOptions}
  // 传入格式匹配的选中值
  value={values.selectedFields.map(field => ({
    value: field,
    label: field.field_name
  }))}
  // 用唯一ID做选项匹配，绕开对象引用比较的问题
  getOptionValue={(option) => option.value.field_id}
  onChange={(fieldSel) => {
    setFieldValue(
      'selectedFields',
      fieldSel.map((field) => field.value)
    );
  }}
/>

如果改完仍有回显问题，检查两项配置：

• 确认selectedFields值存在Formik全局状态中，不要存在步骤组件的本地state里，避免组件卸载时state被清空
• 不要给react-select设置defaultValue属性，受控模式下defaultValue仅在首次挂载生效，步骤切换重挂载时会和传入的value产生冲突

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