Typescript 在打字应用程序中使用Zod和ReactionHookForms时显示中断打字时出错

我正在try 为用户创建一个注册页面，并使用Reaction-Hook-Forms作为注册表单，使用Zod进行验证.当我测试表单时，一开始我可以输入任何内容，只有在提交后才会显示错误.然而，在此之后，错误不断地中断打字，例如，当我获得8个字符时，密码输入中断，当我输入数字时，再次中断.这种情况也发生在邮箱的输入中，其各自的消息错误也会发生.

我的REACTION-HOOK-FORMS设置为ON{MODE:"onSubmit"}.这是我下面的代码

import { useForm } from "react-hook-form";
import { z } from "zod";
import RegisterSchema from "../components/Authentication/Register/RegisterSchema";
import { AuthTitle } from "../components/Authentication";
import { zodResolver } from "@hookform/resolvers/zod";

type RegisterSchemaType = z.infer<typeof RegisterSchema>

type FormFieldProps = {
  labelText: string;
  inputText: string;
  registerInput: keyof RegisterSchemaType;
};

const Register = () => {

  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<RegisterSchemaType>({ resolver: zodResolver(RegisterSchema), mode: "onSubmit"});

  const onSubmit = (data: RegisterSchemaType) => {
    console.log(data);
  }; 

  console.log(errors);

  const FormFields = ({ labelText, inputText, registerInput } : FormFieldProps) => (
    <div className='flex flex-col'>
      <label className='uppercase text-[#49A078] text-sm sm:text-md' htmlFor={inputText}>
        {labelText}
      </label>
      <div className="flex flex-col relative">
        <input
          {...register(registerInput)}
          className='mb-1 mt-1 p-3 outline-1 outline-[#263228] outline rounded-sm pr-5 focus:outline-[#49A078] focus:outline-2'
        />
        {errors[registerInput] && (
          <span className="text-red-500 text-sm mt-0 mb-4">{errors[registerInput]?.message}</span>
        )}
      </div>
    </div>
  );

  return (
    <div className="flex flex-col h-screen justify-center items-center">
      <AuthTitle title="Trace" subTitle="Register" />

      <div className="flex md:flex-row flex-col">
        <form className="flex flex-col p-5 pr-8 border-r border-gray-400" onSubmit={handleSubmit(onSubmit)}>
          <FormFields labelText="First Name" inputText="firstName" registerInput="firstName"/>
          <FormFields labelText="Surname" inputText="surname" registerInput="surname"/>
          <FormFields labelText="Email Address" inputText="email" registerInput="email"/>
          <FormFields labelText="Password" inputText="password" registerInput="password"/>
          <button className="bg-[#263228] text-white p-3 rounded-sm uppercase mt-3" type="submit">
            Register
          </button>
        </form>

        {/* OAuth buttons */}
        <div className="flex items-center justify-center p-4">
          {/* Google OAuth */}
          {/* You may need to replace this with the appropriate library */}
          <h1>LOREM IPSUM</h1>

          {/* Apple OAuth */}
          {/* Add Apple OAuth button here */}
        </div>
      </div>

      {/* Bottom link */}
      <div className="mt-auto">
        <p className="text-center text-[#49A078] uppercase">Already have an account?</p>
      </div>
    </div>
  );
};

export default Register;

这是我的注册表架构

import { z } from "zod";

const RegisterSchema = z.object({
  email: z.string().email({message: "Invalid email."}),
  firstName: z.string().min(2, {message: "Must be 2 or more characters long."}),
  surname: z.string().min(2, {message: "Must be 2 or more characters long."}),
  password: z.string()
    .min(8, {message: "Must be 8 or more characters long."})
    .refine((password) => /\d/.test(password), {message: 'Must contain at least 1 number.',})
});

export default RegisterSchema;

有没有办法让这些错误不中断输入字段的打字？我已经在线查看了react 挂钩表单，当它们出现错误时，输入字段仍然是可输入的.

我try 了使用Form方法的不同模式以及Reaction的State变量，但都不起作用.