我可以将 FieldArray 与 useFormik 挂钩一起使用吗？

Question

在我的表单组件中，我想将 FieldArray 与 useFormik 挂钩一起使用。当我尝试这样做时，出现 TypeError: _this$props2$formik is undefined 错误。

我应该切换到 class 组件还是我可以以某种方式将 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>
    );
};

提前致谢

Answer 1

如 formik 文档中所述：**请注意 <Field>、<FastField>、<ErrorMessage>、connect() 和 <FieldArray> 不适用于useFormik() 因为它们都需要 React 上下文。您必须将表单包装在 Formik 组件中，以便在它们内部使用 formik 上下文时使用这些组件。供参考：https://jaredpalmer.com/formik/docs/api/useFormik

Answer 2

可能有点晚了，但是您可以使用 FormikProvider，它将 useFormik 值作为 prop。

const formik = useFormik()
....
<FormikProvider value={formik}>
  <FieldArray name="" render={() => (...) />
</FormikProvider>

Answer 3

您也可以使用

https://ramdajs.com/docs/#symmetricDifference or https://lodash.com/docs/4.17.15#xor

const { values, handleSubmit, handleChange, handleBlur, setFieldValue, errors } = useFormik({

const handleBerthTypeChange = React.useCallback<NonNullable<CheckboxProps["onChange"]>>(
  (e) => {
    setFieldValue("berthTypes", symmetricDifference(values.berthTypes ?? [], [e.target.name]));
  },
  [values, setFieldValue],
);


<Checkbox
  checked={values.berthTypes?.includes(code) ?? false}
  onChange={handleBerthTypeChange}
  name={code}
/>

我可以将 FieldArray 与 useFormik 挂钩一起使用吗？

Can I use FieldArray alongside useFormik hook?

reactjs

formik