Могу ли я использовать FieldArray вместе с крючком useFormik? - PullRequest
Новая
       1

Могу ли я использовать FieldArray вместе с крючком useFormik?

0 голосов
/ 30 января 2020

В моем компоненте формы я хочу использовать FieldArray с хуком useFormik. Когда я пытаюсь это сделать, я получаю ошибку TypeError: _this$props2$formik is undefined.

Должен ли я переключиться на компонент класса или я могу каким-то образом внедрить formik в FieldArray? Или есть способ сделать это? 

const MyForm = ({openPanel}) => {
    const intl = useIntl();

    const formData = useSelector(state => state.form[Forms.SOURCE_EDIT]);

    const formik = useFormik({
        initialValues: {
            style: formData ? formData.style : '',
            layers: formData ? formData.layers : [],
        },
        validationSchema: createValidationSchema(),
        onSubmit: async values => {
            // ...
        },
    });

    const {
        values,
        errors,
        touched,
        handleSubmit,
        isSubmitting,
        handleChange,
        handleBlur,
    } = formik;

    return (
        <div className={'center-flex'}>
            <form onSubmit={handleSubmit}>
                {/* ... */}
                <FieldArray
                    name={'layers'}
                    render={arrayHelpers => (
                        <div>
                            {values.layers.map((layer, index) => (
                                <div key={index}>{layer.name}</div>
                            ))}
                        </div>
                    )}
                />
                <Button
                    large
                    intent={Intent.PRIMARY}
                    fill
                    loading={isSubmitting}
                    disabled={isSubmitting}
                    type={'submit'}>
                    {intl.formatMessage(messages.next)}
                </Button>
            </form>
        </div>
    );
};

Заранее спасибо

1 Ответ

1 голос
/ 30 января 2020

Как указано в документах formik: ** Помните, что <Field>, <FastField>, <ErrorMessage>, connect() и <FieldArray> НЕ будут работать с useFormik(), поскольку все они требуют React Context. Вы должны обернуть свою форму в Formik компонент, чтобы использовать эти компоненты, так как они используют контекст formik внутри. Для справки: https://jaredpalmer.com/formik/docs/api/useFormik

...