我是一个新手web开发和学习React.我已经使用ZOD表单实现.我的IDE没有显示任何错误,但当我点击提交按钮,屏幕不得到重新渲染.这将是很好的,如果有人能帮助我.我知道这是一个小问题,但我一直在抓我的头超过一天.
APP.TSX
import { useEffect, useState } from "react";
import StudentGradingEvaluationForm, {
StudentFormData,
} from "./Components/StudentGradingEvaluationForm";
import GPACalculator from "./Components/GPACalculator";
import "./Components/Courses";
const App = () => {
const [formData, setFormData] = useState<StudentFormData | null>(null);
const [isFormSubmitted, setIsFormSubmitted] = useState(false);
const handleFormSubmitted = (data: StudentFormData) => {
if (data) {
setFormData(data);
setIsFormSubmitted(true);
}
};
const resetForm = () => {
setFormData(null);
setIsFormSubmitted(false);
};
return (
<>
<div style={{ textAlign: "center" }}>
<h1>GPA Calculator for Individual Student</h1>
</div>
<div>
{!isFormSubmitted && (
<StudentGradingEvaluationForm onSubmit={handleFormSubmitted} />
)}
{isFormSubmitted && !formData && (
<p className="text-danger">Enter correct credentials</p>
)}
</div>
{formData && (
<button className="btn btn-outline-danger" onClick={resetForm}>
Reset Form
</button>
)}
{formData && formData.courses && (
<GPACalculator
subject={formData.courses}
number={formData.number}
name={formData.name}
/>
)}
</>
);
};
export default App;
x
StudentGradingEvaluationForm.tsx
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import courses from "./Courses";
const schema = z.object({
name: z
.string()
.min(3, { message: "Description should be atleast 3 characters." }),
number: z.number().min(0).max(100),
courses: z.enum(courses, {
errorMap: () => ({ message: "Course is required." }),
}),
});
export type StudentFormData = z.infer<typeof schema>;
interface Props {
onSubmit: (data: StudentFormData) => void;
}
const StudentGradingEvaluationForm = ({ onSubmit }: Props) => {
const { register, handleSubmit } = useForm<StudentFormData>({
resolver: zodResolver(schema),
});
return (
<form
onSubmit={handleSubmit((data) => {
onSubmit(data);
console.log(onSubmit);
})}
>
<div className="mb-3">
<label htmlFor="studentName" className="form-label">
Name of Student
</label>
<input
id="studentName"
type="text"
className="form-control"
{...register("name")}
/>
</div>
<div className="mb-3">
<label htmlFor="courseName" className="form-label">
Name of Course
</label>
<div>
<select
id="courseName"
className="select-control"
{...register("courses")}
>
<option value=""></option>
{courses.map((course) => (
<option key={course} value={course}>
{course}
</option>
))}
</select>
</div>
</div>
<div className="mb-3">
<label htmlFor="number" className="form-label">
Enter Number
</label>
<input
id="number"
type="number"
className="form-control"
{...register("number")}
/>
</div>
<button type="submit" className="btn btn-primary">
Submit
</button>
</form>
);
};
export default StudentGradingEvaluationForm;
Courses.ts
const courses = [
"Mechanics of Materials - I",
"Fluid Dynamics - I",
"Ordinary Differential Equations",
"Thermodynamics - II",
"Basic Electrical and Electronics Engineering",
] as const;
export default courses;
GPACalculator.tsx
interface Props {
subject: string;
name: string;
number: number;
}
const GPACalculator = ({ subject, number, name }: Props) => {
const calculateGpa = () => {
if (number < 100 && number >= 80) return "A";
else if (number < 80 && number >= 65) return "B";
else if (number < 65 && number >= 55) return "C";
else if (number < 55 && number >= 40) return "D";
else return "FAIL";
};
return (
<div>
<h2>GPA Calculator Result for {name}</h2>
<p>Subject: {subject}</p>
<p>Number: {number}</p>
<p>GPA: {calculateGpa()}</p>
</div>
);
};
的数据
导出默认GPAC计算器;
我使用了以下依赖项:
npm create email protected(https://stackoverflow.com/cdn-cgi/l/email-protection) npm i bootstrap npm i zod npm i email protected(https://stackoverflow.com/cdn-cgi/l/email-protection) npm i @hookform/ email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)
VS代码没有显示任何错误。当我点击提交按钮时,什么也没有发生。我相信我的代码是简单和不言自明的。期待帮助。
2条答案
按热度按时间pdtvr36n1#
react-hook-form默认将输入值视为字符串
我将Schema z.number()更新为z.coerce.number()
字符串
我添加消息以更好地理解
型
3ks5zfa02#
所以问题是,你的代码没有错误。你的代码工作正常。但是你有zod resolver的表单验证错误。由于你没有显示任何表单错误,你不能在这里看到问题。
附加当前代码中出现的错误-x1c 0d1x
如何修复:
字符串
就像我在这里显示的那样注册number输入。
还有一件事:
型
更新StudentGradingEvaluationForm组件顶部代码中的这些行,以查看错误状态日志。