オブジェクトの配列を使用する場合は、yup と reverse-hook-form の名前を連結します

Question

react-hook-form を register と結合しようとしていますcode> ;yup パターンが接続されましたが、エラーが発生しました。私の目標は、入力ボックスをループでレンダリングするため、exampleArray${index}.exampleProp のような名前を渡すことです。

簡単な例:

import * as yup from "yup";
import { useForm } from "react-hook-form";
"@hookform/resolvers/yup" から { yupResolver } をインポートします。

const スキーマ = yup.object().shape({
  例Arr: 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} | exampleArr.$ {数値}.exampleProp'。

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

Answer 1

exampleArr.${number} のタイプを に伝える必要があります:

たとえば、サンドボックスでこれをテストしたところ、完璧に動作しました:

リーリー