无法在 react-select 组件中维护 formik 状态值

Question

我将 react-select（多值）与 Formik 以及 Material-UI Stepper（向导）一起使用，并将值成功存储在 Formik 的 initialStates 值中，但是当我前进到下一个屏幕时，使用我的条件组件渲染Stepper 然后返回我的 react-select 组件所在的一个屏幕，它不再保存/显示已在我的 react-select 组件中选择的值，即使这些值仍在 Formik 的 initialStates 值中。

我的状态如下，正确存储了我的selectedOptions：

import Select from 'react-select';

const myOptions= [
  { value: 'Food', label: 'Food' },
  { value: 'Being Fabulous', label: 'Being Fabulous' },
  { value: 'Unicorns', label: 'Unicorns' },
  { value: 'Kittens', label: 'Kittens' },
];


"props": {
    "myGroups": [
        {
            "myGroupName": "",
            "selectedOptions": [
                {
                    "value": "Unicorns",
                    "label": "Unicorns"
                },
                {
                    "value": "Kittens",
                    "label": "Kittens"
                }
            ]
        }
     ]
 }

这里是 react-select 组件的代码：

<Formik initialValues={initialFormValues} validationSchema={formSchema} onSubmit={this.handleFormSubmit} enableReinitialize>
    {({ handleSubmit, handleChange }) => (
        <Form noValidate onSubmit={handleSubmit} autoComplete='off'>
            <Select
                options={myOptions}
                isMulti={true}
                name={`myGroups.${index}.selectedOptions`}
                onChange={(selectedOption) => {
                    let e = { target: { name: `myGroups.${index}.selectedOptions`, value: selectedOption } };
                    handleChange(e);
                }}
            />
        </Form>
    )}
</Formik>

返回时，我希望在选择中同时看到“独角兽”和“小猫”，但它是空的。

有什么想法可以在这个组件中维护状态吗？我可以以某种方式使用 `defaultValue' 吗？

Answer 1

我找到的唯一解决方案是安装这个库：formik-material-ui

轻松导入后即可：

import { Select } from 'formik-material-ui';

并在Field组件props中使用。