객체 배열을 사용할 때 yup과 React-hook-form의 이름을 연결합니다.

Question

react-hook-form을 register를 통해 와 결합하려고 합니다. ;예 패턴이 연결되었지만 오류가 발생했습니다. 내 목표는 루프에서 입력 상자를 렌더링할 것이므로 exampleArray${index}.exampleProp과 같은 이름을 전달하는 것입니다.

간단한 예:

import *를 "yup"에서 yup으로 가져옵니다.
"react-hook-form"에서 { useForm }을 가져옵니다.
"@hookform/resolvers/yup"에서 { yupResolver }를 가져옵니다.

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

type FormValues ​​​​= yup.InferType<스키마 유형>;;

기본 함수 내보내기 App() {
  const 메소드 = useForm<FormValues>({
    리졸버: yupResolver(스키마)
  });
  반품 (
    <input type="text" {...methods.register("exampleArr[0].exampleProp")} />
  );
}

<인용문>

'exampleArr[0].exampleProp'' 유형의 매개변수는 'exampleArr' 유형에 할당될 수 없습니다. exampleArr.${number} { 번호}.exampleProp'.

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

Answer 1

어떤 유형을 알려주어야 하나요? exampleArr.${number}:

예를 들어, 방금 샌드박스에서 이것을 테스트했는데 훌륭하게 작동했습니다.

으아악