Formik 没有显示在 nextjs 页面上？
Posted
技术标签:
【中文标题】Formik 没有显示在 nextjs 页面上？【英文标题】：Formik not displaying on a nextjs page? 【发布时间】：2021-06-03 02:23:04 【问题描述】：我有一个“登录”组件，其中有一个带有 Formik 的 div，只有一些名字和电子邮件表单，没有错误，但 Formik 组件根本不显示，它只是一个空 div ，其他任何东西都可以完美运行。这是一段代码，也许我遗漏了一些东西：
import Link from "next/link";
import Head from "next/head";
import styles from "../styles/Home.module.css";
import Login from "../components/Login";
export default function Home()
return (
<>
<Head>
<title>login page</title>
</Head>
<h1>hello</h1>
<Login />
</>
);
还有登录组件本身：
import Formik from "formik";
import TextField from "@material-ui/core";
const Login = () =>
return (
<div>
<Formik
initialValues= firstName: "", lastName: "", email: ""
onSubmit=data =>
console.log(data);
>
( values, handleChange, handleBlur, handleSubmit ) =>
<form onSubmit=handleSubmit>
<TextField
onChange=handleChange
onBlur=handleBlur
value=values.firstName
/>
<TextField
onChange=handleChange
onBlur=handleBlur
value=values.lastName
/>
<TextField
onChange=handleChange
onBlur=handleBlur
value=values.email
/>
</form>;
</Formik>
</div>
);
;
export default Login;
所以<h1>hello</h1> 出现在页面上，并且应该在其中包含登录组件的空 div 也存在。
问题可能是什么？也许我只是瞎了眼，错过了一些简单的东西，还是有某种包装问题？
【问题讨论】：
控制台有错误吗？ @LazarNikolic 不，只是一些不相关的警告。 这很奇怪。我唯一想到的是您可能错误地导入了它。您可以使用绝对路径而不是相对路径吗？ 【参考方案1】：您必须在 Formik 子回调中返回 JSX。
( values, handleChange, handleBlur, handleSubmit ) =>
return (
<form onSubmit=handleSubmit>
<!-- Rest of the form -->
</form>
);
或简写语法：
( values, handleChange, handleBlur, handleSubmit ) => (
<form onSubmit=handleSubmit>
<!-- Rest of the form -->
</form>
)
【讨论】：
天哪，谢谢，我忘了它甚至是一个功能......我觉得很愚蠢，谢谢大声笑以上是关于Formik 没有显示在 nextjs 页面上？的主要内容，如果未能解决你的问题，请参考以下文章
防止多步 Formik 表单在重新渲染上一步时重置表单控件输入
NextJs getStaticPaths 未呈现适当的页面，显示 404 错误