使用物件數組時，連接 yup 和 react-hook-form 的名稱

Question

我正在嘗試透過register將react-hook-form與code>react-hook-form與 ;yup的模式連接起來，但遇到了一個錯誤。我的目標是傳遞一個類似exampleArray${index}.exampleProp的名稱，因為我會在循環中渲染輸入框。

一個簡單的例子：

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

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

type FormValues = yup.InferType<typeof schema>;

export default function App() {
  const methods = useForm<FormValues>({
    resolver: yupResolver(schema)
  });
  return (
    <input type="text" {...methods.register("exampleArr[0].exampleProp")} /> // error here
  );
}

類型'"exampleArr[0].exampleProp"'的參數不能賦值給類型'"exampleArr" | exampleArr.${number} | exampleArr.${ number}.exampleProp'。

codesandbox中的範例：https://codesandbox.io/s/funny-orla-97p8m2?file=/src/App.tsx

Answer 1

你需要告訴exampleArr.${number}的型別是什麼：

例如，我剛剛在你的沙盒上測試了一下，它運行得很好：

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