#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. к сожалению, это не работает, мой друг выдает ту же ошибку