英文:
"useFormik" cannot be called at the top level
问题
错误：无法在顶层调用React Hook "useFormik"。React Hooks必须在React函数组件或自定义的React Hook函数中调用。
我将第75行到92行的代码剪切，并粘贴到第5行，但仍然出现相同的错误（如何解决此问题）。
英文:
Error: React Hook "useFormik" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function
i cut this line from line 75 to 92 and paste in line 5 but same error (HOW TO SOLVE THIS)
答案1
得分: 1
在这张图片中，我看到你在函数组件外部使用了 useFormik 钩子。但是你必须在一个 React 函数组件 内部使用它。
// 导入所需的模块和库
import React from 'react';
import { useFormik } from 'formik';
// 一个 React 函数组件
const SignupForm = () => {
// 这里它在 `SignupForm` 组件内部
// useFormik 钩子开始
const formik = useFormik({
initialValues: {
firstName: '',
lastName: '',
email: '',
},
onSubmit: values => {
alert(JSON.stringify(values, null, 2));
},
});
// useFormik 钩子结束
// 渲染表单
return (
<form onSubmit={formik.handleSubmit}>
<label htmlFor="firstName">First Name</label>
<input
id="firstName"
name="firstName"
type="text"
onChange={formik.handleChange}
value={formik.values.firstName}
/>
<label htmlFor="lastName">Last Name</label>
<input
id="lastName"
name="lastName"
type="text"
onChange={formik.handleChange}
value={formik.values.lastName}
/>
<label htmlFor="email">Email Address</label>
<input
id="email"
name="email"
type="email"
onChange={formik.handleChange}
value={formik.values.email}
/>
<button type="submit">Submit</button>
</form>
);
};
英文:
In the picture, I see you have used the useFormik hook outside the function component. But you have to use this inside a React Function Component
// import required modules & libraries
import React from 'react';
import { useFormik } from 'formik';
// A react function component
const SignupForm = () => {
// here it is inside the `SignupForm` component
// useFormik Hook Start
const formik = useFormik({
initialValues: {
firstName: '',
lastName: '',
email: '',
},
onSubmit: values => {
alert(JSON.stringify(values, null, 2));
},
});
// useFormik Hook End
// Rnder the form
return (
<form onSubmit={formik.handleSubmit}>
<label htmlFor="firstName">First Name</label>
<input
id="firstName"
name="firstName"
type="text"
onChange={formik.handleChange}
value={formik.values.firstName}
/>
<label htmlFor="lastName">Last Name</label>
<input
id="lastName"
name="lastName"
type="text"
onChange={formik.handleChange}
value={formik.values.lastName}
/>
<label htmlFor="email">Email Address</label>
<input
id="email"
name="email"
type="email"
onChange={formik.handleChange}
value={formik.values.email}
/>
<button type="submit">Submit</button>
</form>
);
};
答案2
得分: 0
你需要做类似这样的操作：
const MyForm = (handleSubmit, setValues, ...) => {
// 需要像这样使用这个 hook
const formik = useFormik({
initialValues: {
NameOftheUPSIProject: '',
InformationSharedBy: '',
InsiderTypes: '',
..
},
onSubmit: values => {
console.log(JSON.stringify(values));
},
});
}
如上所示的代码中，你可以将 useFormik hook 放在 React 的 functional 组件或 React 的 hook 函数内部使用。
参考文档: useFormik
英文:
You need to do something like this:
const MyForm = (handleSubmit, setValues, ...) => {
// the hook needs to be used like this
const formik = useFormik({
initialValues: {
NameOftheUPSIProject: '',
InformationSharedBy: '',
InsiderTypes: '',
..
},
onSubmit: values => {
console.log(JSON.stringify(values));
},
});
}
As seen in the above code, you can use the useFormik hook either inside a React functional component or a React hook function.
Reference doc: useFormik
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论