Concaténer les noms de yup et réagir-hook-form lors de l'utilisation d'un tableau d'objets

Question

J'essaie de combiner react-hook-form avec code> ;yup a été connecté, mais une erreur a été rencontrée. Mon objectif est de passer un nom comme exampleArray${index}.exampleProp puisque je vais rendre la zone de saisie en boucle.

Un exemple simple :

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

schéma const = ouais.object().shape({
  exempleArr : ouais.array().of(
    ouais.object().shape({
      exempleProp:oui.string()
    })
  )
});

tapez FormValues ​​​​= yup.InferType;

exporter la fonction par défaut App() {
  méthodes const = useForm({
    résolveur : yupResolver (schéma)
  });
  retour (
    
  );
}

Le paramètre de type '"exampleArr[0].exampleProp"' ne peut pas être attribué au type '"exampleArr" | exampleArr.${number} { numéro}.exampleProp'. 

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

Answer 1

Quel type devez-vous dire exampleArr.${number} :

Par exemple, je viens de tester ceci sur votre bac à sable et cela a très bien fonctionné :

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