使用 Formik 时在控制台中出错<错误消息 />

Question

我试图将Formik与useFormik挂钩一起使用，但在使用Formik时，我在控制台中遇到了这个错误。当我删除标签时，错误就会消失。但我不知道如何解决这个错误：

Formik上下文未定义，请验证您正在渲染，，或您的自定义上下文组件作为组件的子级。组件名称：错误消息Impl

这是我的代码：

import { ErrorMessage, useFormik } from 'formik';
import { observer } from 'mobx-react-lite';
import { useStore } from '../../app/stores/store';
function LoginForm() {
const { userStore } = useStore();
const formik = useFormik({
initialValues: {
email: '',
password: '',
error: null,
},
onSubmit: (values, actions) => {
setTimeout(() => {
userStore.login(values).catch((error) => actions.setErrors({ error: 'Invalid email' }));
actions.setSubmitting(false);
}, 500);
},
});
return (
<form onSubmit={formik.handleSubmit}>
<div className='input-container'>
<input
id='email'
name='email'
type='email'
placeholder='Email'
onChange={formik.handleChange}
// values in formik contains initialValues
value={formik.values.email}
/>
</div>
<div className='input-container'>
<input
id='password'
name='password'
type='password'
placeholder='Password'
onChange={formik.handleChange}
value={formik.values.password}
/>
</div>
<div className='input-container'>
<ErrorMessage name='error' render={() => <p>{formik.errors}</p>} />
</div>
<button type='submit' className='btn btn-secondary'>
Login
{formik.isSubmitting && (
<span
className='spinner-border spinner-border-sm ms-2'
role='status'
aria-hidden='true'
></span>
)}
</button>
</form>
);
}
export default observer(LoginForm);

Answer 1

根据Formik文档，不能将<ErrorMessage>与useFormik一起使用。

**请注意，<Field>、<FastField>、<ErrorMessage>、connect()和<FieldArray>将无法与useFormik()一起使用，因为它们都需要React Context。

上面解释了为什么您会收到错误消息re:missing"Formik上下文"；

Answer 2

这个错误是因为您没有使用上下文，换句话说；您没有在返回中指出将使用formik的表单在哪里，您需要将代码放在formik标记之间。

第一：放入/更改您的进口

import { Form as FormikForm, FormikProvider, useFormik } from "formik";

现在返回：

return(
<FormikProvider value={formik}>
<FormikForm>
<form onSubmit={formik.handleSubmit}>
<div className='input-container'>
......(code).......
</FormikForm>
<FormikProvider>

注：

• 在导入时，我重命名了Formik Form，以免与HTML或Bootsratp产生冲突(如果您将来使用它(
• 在中，您正在指示您在上面创建/声明的formik变量，其中有初始formik值