Formik结合React-select使用时defaultValue不生效无默认值问题求助

核心原因 #

• defaultValue 是 React-Select 的非受控属性，仅在组件首次挂载渲染时生效。如果你的 activity 数据是异步请求获取的，首次渲染 MySelectInput 时 activity.category 还未赋值，组件挂载完成后即使拿到了分类值，defaultValue 也不会触发更新，因此选择框显示为空。你传入静态值时首次渲染就有完整数据，所以可以正常显示。
• 你已经通过 useField 关联了 Formik 的表单状态，此时混用非受控的 defaultValue 和 Formik 的受控状态会出现逻辑冲突，应该将 React-Select 作为受控组件使用。

修复步骤 #

步骤1：配置 Formik 初始值 #

在 Formik 初始化时直接设置 category 字段的初始值，不需要额外传 defaultCategory 属性。如果 activity 是异步加载的，可开启 enableReinitialize 配置保证初始值更新时同步刷新表单状态：

const formik = useFormik({
  initialValues: {
    category: activity?.category || '',
    // 其他表单字段初始值
  },
  enableReinitialize: true, // 初始值变化时自动重设表单状态
  // 其余Formik配置
})

步骤2：改造 MySelectInput 为受控组件 #

将原有的 defaultValue 替换为受控属性 value，把 Formik 中存储的 value 字符串转换为 React-Select 需要的选项对象格式：

interface Props {
    // .. other props
    options: CategoryOptions[];
}

const MySelectInput: React.FC<Props> = (props) => {
    const [field, meta, helpers] = useField(props.name);
    // 匹配当前值对应的选项对象
    const currentSelectValue = props.options.find(opt => opt.value === field.value);

    return (
        <Select
            options={props.options}
            isSearchable
            value={currentSelectValue}
            onChange={(v) => helpers.setValue(v!.value)}
            onBlur={() => helpers.setTouched(true)}
            placeholder={props.placeholder}
            styles={customSelectStyles}
        />
    )
};

export default MySelectInput;

步骤3：简化组件调用 #

移除 defaultCategory 参数即可：

<MySelectInput
   options={CategoryOptions}
   placeholder="Category"
   name="category"
   label="Category"
/>

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