无法在react-select组件内维持formik状态值 [英] Unable to maintain formik state values within react-select component

问题描述

我正在使用带有Formik的react-select(多值)以及Material-UI Stepper(向导)，并将这些值成功存储在Formik的initialStates值中，但是当我前进到下一个屏幕时，在我的条件下使用条件组件渲染步进，然后返回到我的反应选择组件所在的一个屏幕，即使这些值仍在Formik的initialStates值中，它也不再保存/显示我的反应选择组件中已经选择的值.

I am using react-select (multi-values) with Formik together with Material-UI Stepper (wizard) and have the values stored successfully within Formik's initialStates values but when I advance to the next screen, using conditional component rendering within my Stepper and then return back one screen where my react-select component resides, it no longer holds/shows the values that have already been selected within my react-select component even though the values are still in Formik's initialStates values.

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

My state is as follows which is storing my selectedOptions correctly:

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组件的代码:

Here is the code for the react-select component:

<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>

返回时，我希望看到两个独角兽"和小猫"在选择范围内，但为空.

When returning, I expected to see both "Unicorns" and "Kittens" within the select but it's empty.

有什么想法可以在此组件中维持状态吗?我也许可以以某种方式使用"defaultValue"吗?

Any ideas how I can maintain state within this component? Can I perhaps somehow use `defaultValue' ?

推荐答案

我发现的唯一解决方案是安装此库:

The only solution I found is to install this library : formik-material-ui

您可以在轻松导入之后:

You can after easy import:

import {选择}从'formik-material-ui';

并在Field组件道具中使用它.

And use it in the Field component props.

这篇关于无法在react-select组件内维持formik状态值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！