无法渲染，REACT

Question

我是网络开发和学习 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;

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 [电子邮件受保护] npm i bootstrap npm i zod npm i [电子邮件受保护] npm i @hookform/[电子邮件受保护]

VS Code 没有显示任何错误。当我点击提交按钮时，什么也没有发生。我相信我的代码很简单且不言自明。期待帮助。

Answer 1

所以问题是，您的代码没有错误。你的代码工作正常。但是 zod 解析器出现表单验证错误。由于您没有显示任何表单错误，因此您在这里看不到问题。

附上您当前代码遇到的错误 -

如何修复：

<input
      id="number"
      type="text"
      className="form-control"
      {...register("number", {
        valueAsNumber: true,
      })}
    />

只需注册 number 输入，就像我在此处所示的那样。

另一件事：

const { register, handleSubmit, formState: { errors } } = useForm({
resolver: zodResolver(schema),});
console.log("errors =====>", errors)

更新 StudentGradingEvaluationForm 组件顶部代码中的这些行以查看错误状态日志。

如果有帮助请点赞！

如果您有任何疑问，请告诉我。