reactjs - Type av handleSubmit-parameter i react-hook-form

Jeg har en TypeScript-feil i handleSubmit-funksjonen.

  1. Jeg henter handleSubmit-funksjonen via useForm:
const {handleSubmit, control, watch, reset} = useForm()
  1. Jeg definerer submit-funksjonen:
const submit = (data: { file: File, crop: Area }) => {
    onSubmit(data.file, data.crop)  // onSubmit is passed from parent component
}
  1. Jeg sender handleSubmit i onSubmit prop til Form komponenten
<Form onSubmit={handleSubmit(submit)}>
    // registering form fields here
</Form>
  1. Fikk følgende TypeScript-feil:
 Argument of type '(data: {    file: File;    crop: Area;}) => void' is not assignable to parameter of type 'SubmitHandler<FieldValues>'.
[1]   Types of parameters 'data' and 'data' are incompatible.
[1]     Type '{ [x: string]: any; }' is missing the following properties from type '{ file: File; crop: Area; }': file, crop  TS2345

Hvis jeg sender handleSubmit på denne måten fungerer alt fint.

<Form onSubmit={handleSubmit(submit as any)}></Form>

Men jeg prøver å ikke bruke any i prosjektet mitt. Så hvis noen kunne forklare hvordan jeg skal type parameteren for handleSubmit-funksjonen, vil jeg sette pris på det ;)

Svar #1

Du kan bare legge til samme type som du legger til i submit()-funksjonens data, til useForm-hooken.

Så i ditt eksempel kan du bare lage en ny type:

type Data = { 
  file: File; 
  crop: Area;
}

og sende det til begge, submit()-funksjonen:

const submit = (data: Data) => {
// ...

og useForm() hook:

const {handleSubmit, control, watch, reset} = useForm<Data>()

Da burde det fungere :)

Så vidt jeg forstår, gir typen som gis til submit()s data informasjon om typingen bare til submit()-funksjonen.

Men fordi denne funksjonen også blir sendt videre som et argument til handleSubmit(), må handleSubmit() vite om typen til dataene som blir sendt med submit(). Og vi kan la den vite om denne typen, ganske enkelt ved å gi den til useForm-hooken.

Svar #2

Et mer komplett eksempel kan se omtrent slik ut:

const formSchema = z.object({
  title: z.string(),
})

type FormData = z.infer<typeof formSchema>

const formOptions: UseFormProps<FormData> = {
  resolver: ...,
  defaultValues: ...,
}

const { handleSubmit } = useForm<FormData>(formOptions)

Selv om det er litt mer ordrikt, er det fine med dette at du vil ha typing på dine defaultValues så vel som de innkommende dataverdiene i din form submit-handler. Jeg håper det hjelper!

Relaterte artikler