Я использую форму React Hook с машинописным текстом, строка не принимает входящие данные

#javascript #reactjs #typescript #react-hook-form

Вопрос:

Когда я отправляю {…register(имя)} в свой компонент ввода с помощью формы крючка, он получает сообщение об ошибке, но когда я отправляю его как {…register(«полное имя»)}, он не получает сообщение об ошибке. Я не могу использовать что-то вроде («полное имя»), потому что я отправляю его с помощью функции карты.

регистрация.tsx

 import { Form, Input, PrimaryButton } from "components";  import { LoginRegisterLayout } from "layouts";  import { formTypes } from "constants/layouts/loginRegisterLayout"; import { getFormFields } from "constants/pages/register"; import { FormFieldType } from "utils/formFieldType";  import { useForm, SubmitHandler } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import * as yup from "yup";  type Inputs = {  fullname: string;  email: string;  password: string;  passwordConfirmation: string; };  const Register = () =gt; {  const {  register,  handleSubmit,  watch,  formState: { errors },  } = useFormlt;Inputsgt;();  const onSubmit: SubmitHandlerlt;Inputsgt; = data =gt; console.log(data);   return (  lt;LoginRegisterLayout formType={formTypes.REGISTER} headTitle="Register"gt;  lt;form onSubmit={handleSubmit(onSubmit)}gt;  lt;gt;  {getFormFields.map(  (  {  id,  name,  label,  placeholder,  type,  passwordField,  }: FormFieldType,  index: number  ) =gt; (  lt;Input  {...register(name)}  label={label}  id={id}  name={name}  key={index}  placeholder={placeholder}  type={type}  passwordField={passwordField}  /gt;  )  )}   lt;PrimaryButton size="xl" disabled={false}gt;  Confirmation  lt;/PrimaryButtongt;  lt;/gt;  lt;/formgt;  lt;/LoginRegisterLayoutgt;  ); };  export default Register;   

Я прикрепил ошибку, которую я получил, как на картинке ниже.

введите описание изображения здесь

Комментарии:

1. Не могли бы вы предоставить содержание FormFieldType интерфейса?

2. тип поля интерфейса экспорта { идентификатор: строка; имя: строка; тип: строка; метка: строка; заполнитель: строка; поле пароля?: логическое; }

Ответ №1:

Попробуйте определить тип следующим образом

 {getFormFields.map(  (  {  id,  name,  label,  placeholder,  type,  passwordField,  }: FormFieldType,  index: number  ) =gt;{   const nam : Inputs = name  return(  lt;Input  {...register(nam)}  label={label}  id={id}  name={name}  key={index}  placeholder={placeholder}  type={type}  passwordField={passwordField}  /gt;  ) }  )}  

Комментарии:

1. У нас уже есть тип для имени из FormFiledType. Это решение не работает

2. внес несколько изменений, дайте мне знать, если это поможет

3. к сожалению, это не работает, мой друг выдает ту же ошибку