Verketten Sie die Namen „yup“ und „react-hook-form“, wenn Sie ein Array von Objekten verwenden

Question

Ich versuche, react-hook-form über register ;yup Muster wurde verbunden, aber es ist ein Fehler aufgetreten. Mein Ziel ist es, einen Namen wie exampleArray${index}.exampleProp zu übergeben, da ich das Eingabefeld in einer Schleife rendern werde.

Ein einfaches Beispiel:

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>;

Standardfunktion App() exportieren {
  const-Methoden = useForm<FormValues>({
    Resolver: yupResolver(schema)
  });
  zurückkehren (
    <input type="text" {...methods.register("exampleArr[0].exampleProp")} /> // Fehler hier
  );
}

Parameter vom Typ „exampleArr[0].exampleProp“ kann nicht dem Typ „exampleArr“ | zugewiesen werden { number}.exampleProp'.

Beispiel in 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)} />