javascript - Formik 没有在屏幕上渲染任何东西
问题描述
我对 react 和 next.js 还很陌生,所以我一直在关注一个教程视频,该视频在某一时刻展示了如何使用 formik 创建一个注册屏幕。我基本上直接复制了视频,但是当我尝试渲染所有内容时,什么都没有出现。我知道代码消失是由于 formik 造成的,因为我将其删除并添加到一个简单的 div 中并进行了渲染。这是我的代码以及我的 package.json:
不工作的页面:
import React from 'react';
import {Formik, Form} from "formik";
import {Wrapper} from "../components/Wrapper";
import {InputField} from "../components/InputField";
import {Box, Button} from "@chakra-ui/react";
interface registerProps {}
const Register : React.FC<registerProps> = ({}) => {
return (
<Wrapper>
<Formik initialValues={{ email:"", password:""}} onSubmit={(values) => {console.log(values);}}>
{() => ({}) => (
<Form>
<InputField name='email' label='Email'/>
<Box mt={4}>
<InputField name='password' label='Password'/>
</Box>
<Button mt={4} type="submit">Submit</Button>
</Form>
)}
</Formik>
</Wrapper>
);
}
export default Register;
注册屏幕的包装器:
import React from "react";
import {Box} from "@chakra-ui/react";
interface WrapperProps {
variant?: 'small' | 'regular';
}
export const Wrapper: React.FC<WrapperProps> = ({ children, variant = "regular"}) => {
return (
<Box
mt={8}
mx="auto"
maxW={variant === "regular" ? "800px" : "400px"}
w="100%">
{children}
</Box>
);
};
输入字段:
import React, {InputHTMLAttributes} from "react";
import {useField} from "formik";
import {FormControl, FormErrorMessage, FormLabel, Input} from "@chakra-ui/react";
type InputFieldProps = InputHTMLAttributes<HTMLInputElement> & {
label : string,
name : string;
}
export const InputField: React.FC<InputFieldProps> = ({label, size: _, ...props}) => {
const [field, {error}] = useField(props);
return (
<FormControl isInvalid={!!error}>
<FormLabel htmlFor="name">{label}</FormLabel>
<Input {...field} id={field.name} placeholder={field.name} />
{error ? <FormErrorMessage>{error}</FormErrorMessage> : null}
</FormControl>
)
}
包.JSON:
{
"name": "with-chakra-ui",
"version": "0.1.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@chakra-ui/core": "^0.8.0",
"@chakra-ui/icons": "^1.0.0",
"@chakra-ui/react": "^1.6.4",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.0.0",
"@types/node": "^16.0.0",
"emotion-theming": "^11.0.0",
"formik": "^2.2.9",
"framer-motion": "^4.0.3",
"next": "^11.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"typescript": "^4.3.5"
},
"license": "MIT"
}
解决方案
推荐阅读
- asp.net - 识别参数并映射到复杂对象
- ios - AVAssetExportSession 卡住(未开始)导出
- html - HTML(Angular)中两个行类之间的空间
- java - 如何在我的 Spring Boot 应用程序中访问 Jar 文件的 Controller 类中提到的 Rest API
- reactjs - 使用 Reactjs + Electron 最简单的流认证(无需任何特殊服务)
- android - 如何在一夜之间停止android自动覆盖调试apk?
- php - 如何将带有变量的 where 条件添加到我的控制器?
- c# - 如何在 Visual Studio 的 C# 中创建服务引用?
- tensorflow - 在张量流中表示高精度浮点数
- mysql - 行从 MySQL 中消失,最大允许大小可能是原因吗?