Gabungkan nama yup dan react-hook-form apabila menggunakan tatasusunan objek

Question

Saya cuba menggabungkan react-hook-form dengan register< kod> ;yup Matlamat saya ialah untuk menghantar nama seperti exampleArray${index}.exampleProp

Contoh mudah:

import * sebagai yup daripada "yup";
import { useForm } daripada "react-hook-form";
import { yupResolver } daripada "@hookform/resolvers/yup";

skema const = yup.object().shape({
  exampleArr: yup.array().of(
    yup.object().shape({
      exampleProp:yup.string()
    })
  )
});

taip FormValues ​​​​= yup.InferType<jenis skema>;

eksport fungsi lalai App() {
  kaedah const = useForm<FormValues>({
    penyelesai: yupResolver(skema)
  });
  kembali (
    <jenis input="teks" {...methods.register("exampleArr[0].exampleProp")} />
  );
}

Parameter jenis '"exampleArr[0].exampleProp"' tidak boleh ditugaskan untuk menaip '"exampleArr" | exampleArr.${number}exampleArr.$ { number}.exampleProp'.

Contoh dalam codesandbox: https://codesandbox.io/s/funny-orla-97p8m2?file=/src/App.tsx

Answer 1

Apakah jenis yang perlu anda beritahu exampleArr.${number}:

Sebagai contoh, saya baru sahaja menguji ini pada kotak pasir anda dan ia berfungsi dengan baik:

<input type="text" {...methods.register("exampleArr[0].exampleProp" as any)} />