Formik 没有显示在 nextjs 页面上？答案

【问题标题】：Formik not displaying on a nextjs page?Formik 没有显示在 nextjs 页面上？
【发布时间】：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 不，只是一些不相关的警告。
这很奇怪。我唯一想到的是您可能错误地导入了它。您可以使用绝对路径而不是相对路径吗？

标签： html reactjs next.js formik

【解决方案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>
)}

【讨论】：

天哪，谢谢，我忘了它甚至是一个功能......我觉得很愚蠢，谢谢大声笑