useFieldArray de React Hook Form ne peut pas afficher les données

Question

<Box Component="form" onSubmit={handleSubmit(submit)}>
      <Espacement des conteneurs de grille={2}>
        <Élément de grille xs={12} sm={12} md={12} lg={12}>
          <Champ de texte
            label="Nom Evnet"
            pleine largeur
            {...register("nom de l'événement")}
            name="nom de l'événement"
          />
        </Grille>

        <Élément de grille xs={12} sm={12} md={6} lg={6} alignSelf="center">
          <Champ de texte
            label="Nom du lieu Evnet"
            pleine largeur
            {...s'inscrire("eventVenue")}
            name="eventVenue"
          />
        </Grille>
         <Box sx={{ largeur : "100 %" }}>
          <TitreDialogue
            sx={{ fontWeight : "gras", textTransform : "majuscules" }}
          >
            Catégorie de billet
          </DialogTitle>
        ≪/Boîte>
        <Élément de grille xs={12} sm={12} md={5} lg={4}>
          <Champ de texte
            label="Catégorie"
            pleine largeur
            {...register("ticketCatName")}
            name="ticketCatName"
          />
        </Grille>

        <Élément de grille xs={12} sm={12} md={3} lg={3}>
          <Champ de texte
            type="numéro"
            label="Prix"
            pleine largeur
            {...s'inscrire("ticketCatPrice")}
            name="ticketCatPrice"
          />
        </Grille>

        <Élément de grille xs={12} sm={12} md={3} lg={3}>
          <Champ de texte
            type="numéro"
            label="Total"
            pleine largeur
            {...s'inscrire("ticketCatTotal")}
            nom="ticketCatTotal"
          />
        </Grille>
Ces valeurs que j'obtiens lorsque je soumets le formulaire. 
</Boîte></pré>
<p>我创建了一个动态表单组件, et la carte est affichée。</p>
<pre class="brush:php;toolbar:false;">{fields.map((item, index) => {
              retour (
                <Plus de champs
                  s'inscrire={s'inscrire}
                  clé={item.id}
                  supprimer={supprimer}
                  indice={index}
                  article={article}
                  contrôle={contrôle}
                />
              );
            })}</pré>
<p>Lorsque je soumets le formulaire, les valeurs du tableau des champs n'affichent pas de données, tandis que les autres champs en dehors du tableau des champs fonctionnent correctement. </p>
<p>Il s'agit du code du composant. </p>
<pre class="brush:php;toolbar:false;">import { Box, Grid, IconButton, SvgIcon, TextField } depuis "@mui/material";
importer React depuis « react » ;
importer DeleteIcon depuis '@mui/icons-material/Delete' ;
importer { Fragment } depuis "react" ;

const MoreFields = ({ enregistrer, supprimer, indexer, élément }) =>
  retour (
    <Clé de fragment={item.id}>
      <Élément de grille xs={12} sm={12} md={5} lg={4}>
        <Champ de texte
          label="Catégorie"
          pleine largeur
          {...register(`ticketCategory.${index}.ticketCatName`)}
          nom={`ticketCategory${index}.ticketCatName`}
          defaultValue={item.ticketCatName}
        />
      </Grille>

      <Élément de grille xs={12} sm={12} md={3} lg={3}>
        <Champ de texte
          type="numéro"
          label="Prix"
          pleine largeur
          {...register(`ticketCategory.${index}.ticketCatPrice`)}
          nom={`ticketCategory${index}.ticketCatPrice`}
          defaultValue={item.ticketCatPrice}
        />
      </Grille>

      <Élément de grille xs={12} sm={12} md={3} lg={3}>
        <Champ de texte
          type="numéro"
          label="Total"
          pleine largeur
          {...register(`ticketCategory.${index}.ticketCatTotal`)}
          nom={`ticketCategory${index}.ticketCatTotal`}
          valeur par défaut={item.ticketCatTotal}
         
        />
      </Grille>

      <Élément de grille xs={4} sm={4} md={2} lg={2} alignSelf="center">
        <SvgIcon color='error' onClick={()=>remove(index)} sx={{cursor:'pointer'}}>
          <DeleteIcon size="moyen" />
        </SvgIcon>
      </Grille>
      </Fragment>
  );
} ;

exporter les MoreFields par défaut;

Je peux ajouter et supprimer des champs, mais une fois soumis, les valeurs n'apparaissent pas. Je ne sais pas pourquoi, aidez-moi s'il vous plaît.

Les hooks et les fonctions que j'utilise.

const {register, handleSubmit, control } = useForm();
  const {champs, ajouter, ajouter, supprimer, échanger, déplacer, insérer } = useFieldArray(
    {
      contrôle,
      nom : "ticketCategory",
    }
  );
  const addFields = () => {
    append({ ticketCatName : "", ticketCatPrice : "", ticketCatTotal : "" });
  } ;

  const soumettre = (données) => {
    console.log(données);
  };

Answer 1

Vous devez à la fois enregistrer et nommer la propriété avec le même nom comme ceci :

<TextField
  label="Category"
  fullWidth
  {...register(`ticketCategory.${index}.ticketCatName`)}
  name={`ticketCategory.${index}.ticketCatName`}
  defaultValue={item.ticketCatName}
/>;

React Hook Form vous oblige à ajouter l'index dans le nom du tableau car il utilise la notation par points pour accéder aux champs imbriqués. Par exemple, disons que vous disposez d'un tableau d'objets comme celui-ci :

{
  "ticketCategory": [
    {
      "ticketCatName": "A",
      "ticketCatPrice": 10,
      "ticketCatTotal": 100
    },
    {
      "ticketCatName": "B",
      "ticketCatPrice": 20,
      "ticketCatTotal": 200
    }
  ]
}

Le nom de chaque entrée doit alors correspondre au chemin d'accès au champ dans les données du formulaire. Par exemple, la première entrée du nom de la catégorie de billets doit avoir le nom ticketCategory.0.ticketCatName，第二个票类别价格输入应该具有名称ticketCategory.1.ticketCatPrice. De cette façon, React Hook Form peut contrôler les valeurs d'entrée dans les données du formulaire.