在React中使用Formik添加FormField遇错求助：selectedIds字段问题

我想添加一个fieldId为"selectedIds"的FormField，现有代码如下：

const {handleSubmit, values, setFieldTouched, setFieldValue } =
    useFormik({
        initialValues: {
            selectedIds:[],
        },
        validationSchema,
        onSubmit: //some logic,
    });
 
const field = <FormField name="selectedIds" display="none"/>;


return (
    {field}
    <Table />
);

运行时触发错误：

Cannot destructure property 'validationSchema' of '(0 , formik__WEBPACK_IMPORTED_MODULE_1__.useFormikContext)(...)' as it is undefined.

刚接触Formik和FormFields，求解决方法。

这个错误的根因是你的FormField组件需要从Formik的Context中获取数据，但当前它不在Formik的上下文范围内。useFormik钩子只是创建了Formik实例，但没有自动把上下文传递给子组件，而FormField内部依赖useFormikContext来获取Formik的配置（比如validationSchema），拿不到就会报错。

给你两种解决方式：

方式一：用Formik组件包裹（推荐） #

把useFormik替换成Formik组件，所有需要依赖Formik上下文的组件（比如你的FormField）都放在它的子节点里，这样上下文会自动传递：

import { Formik } from 'formik';

// ...

return (
    <Formik
        initialValues={{ selectedIds: [] }}
        validationSchema={validationSchema}
        onSubmit={/* 你的提交逻辑 */}
    >
        {({ handleSubmit, values, setFieldTouched, setFieldValue }) => (
            <>
                <FormField name="selectedIds" display="none"/>
                <Table />
                {/* 这里可以加提交按钮等其他表单元素 */}
            </>
        )}
    </Formik>
);

方式二：手动提供Formik上下文（仅特殊场景用） #

如果一定要保留useFormik钩子，需要手动用FormikContext.Provider把FormField包起来，把useFormik返回的实例作为上下文值传递：

import { Formik, FormikContext } from 'formik';

// ...

const formik = useFormik({
    initialValues: { selectedIds: [] },
    validationSchema: validationSchema,
    onSubmit: /* 你的提交逻辑 */,
});

return (
    <FormikContext.Provider value={formik}>
        <FormField name="selectedIds" display="none"/>
        <Table />
    </FormikContext.Provider>
);

额外提醒 #

• 确认你的FormField是适配Formik的组件（比如官方的Field、或者UI库的Formik适配版），自定义组件的话要确保内部是用useFormikContext获取上下文的。
• 检查validationSchema是否已经正确定义并导入，别让它本身是undefined，否则也会引发问题。

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