类型 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>> | undefined' 不可分配给类型 'string | 不明确的'

Question

我的输入中存在变量错误问题。我添加到接口error?: string，为什么 typeScript 向我显示这是通信？

Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>> | undefined' is not assignable to type 'string | undefined'.
  Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>' is not assignable to type 'string'.ts(2322)
Input.tsx(6, 3): The expected type comes from property 'error' which is declared here on type 'IntrinsicAttributes & InputProps'

波纹管代码：

用法.tsx

import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import Form from "./Form";
import Input from "./Input";

// interface for form
interface EmailInterface {
  email: string;
  password: string;
}

// validation
const EmailSchema = yup.object().shape({
  email: yup
    .string()
    .email("Enter a valid email")
    .required("Email is required"),
  password: yup
    .string()
    .max(32, "Max password length is 32")
    .required("Password is required")
    .matches(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
      "Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and One Special Case Character"
    ),
  secret: yup
    .string()
    .min(128, "Minimum legnth is 4")
    .max(32, "Max password length is 32")
    .required("Password is required"),
});

const Usage = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({ resolver: yupResolver(EmailSchema) });

  const onSubmit = (data: EmailInterface) => console.log(data);
  return (
    <Form
      buttonLabel="Change Email"
      register={register}
      handleSubmit={handleSubmit}
      onSubmit={onSubmit}
      className="change-form"
    >
      <Input
        name="email"
        type="email"
        placeholder="Enter your email"
        error={errors.email?.message}
        autoFocus
      />
      <Input
        name="password"
        type="password"
        placeholder="Password"
        error={errors.password?.message}
      />

      <Input
        name="secret"
        type="secret"
        placeholder="secret"
        error={errors.secret?.message}
      />
    </Form>
  );
};

export default Usage;

输入.tsx

import { FC, InputHTMLAttributes } from "react";

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  name: string;
  label?: string;
  error?: string;
  register?: any;
  wrapperClass?: string;
  className?: string;
}

const Input: FC<InputProps> = ({
  register,
  name,
  error,
  label,
  wrapperClass,
  ...rest
}) => {
  return (
    <div className={wrapperClass}>
      {label && <label htmlFor={name}>{label}</label>}
      <input
        aria-invalid={error ? "true" : "false"}
        {...register(name)}
        {...rest}
      />
      {error && <span role="alert">{error}</span>}
    </div>
  );
};

export default Input;

Answer 1

helperText={errors.email?.message?.toString()}

将帮助程序文本中的错误消息设置为字符串，这将解决问题，它为我解决了这个问题，请检查下面的代码

<TextField
          placeholder='Email'
          label='Email'
          fullWidth
          {...register("email")}
          sx={{
            mt: 3,
          }}
          error={Boolean(errors["email"]?.message)}
          helperText={errors.email?.message?.toString()}
        />

Answer 2

使用react-hook-form中的FieldError类型作为InputProps中的错误字段。

您可以在此页面上找到文档中的一个示例：https ://react-hook-form.com/ts