Das useFieldArray von React Hook Form kann keine Daten anzeigen

Question

<Box Component="form" onSubmit={handleSubmit(submit)}>
      <Rastercontainerabstand={2}>
        <Gitterelement xs={12} sm={12} md={12} lg={12}>
          <TextField
            label="Evnet Name"
            Gesamtbreite
            {...register("eventName")}
            name="eventName"
          />
        </Gitter>

        <Gitterelement xs={12} sm={12} md={6} lg={6} alignSelf="center">
          <TextField
            label="Evnet-Veranstaltungsortname"
            Gesamtbreite
            {...register("eventVenue")}
            name="eventVenue"
          />
        </Gitter>
         <Box sx={{ width: "100%" }}>
          <DialogTitel
            sx={{ fontWeight: "bold", textTransform: "uppercase" }}
          >
            Ticketkategorie
          </DialogTitle>
        </Box>
        <Gitterelement xs={12} sm={12} md={5} lg={4}>
          <TextField
            label="Kategorie"
            Gesamtbreite
            {...register("ticketCatName")}
            name="ticketCatName"
          />
        </Gitter>

        <Gitterelement xs={12} sm={12} md={3} lg={3}>
          <TextField
            type="Nummer"
            label="Preis"
            Gesamtbreite
            {...register("ticketCatPrice")}
            name="ticketCatPrice"
          />
        </Gitter>

        <Gitterelement xs={12} sm={12} md={3} lg={3}>
          <TextField
            type="Nummer"
            label="Gesamt"
            Gesamtbreite
            {...register("ticketCatTotal")}
            name="ticketCatTotal"
          />
        </Gitter>
Diese Werte erhalte ich, wenn ich das Formular absende. 
</Box>

我创建了一个动态表单组件,使用map来显示.

{fields.map((item, index) => {
              zurückkehren (
                <MoreFields
                  registrieren={register}
                  key={item.id}
                  entfernen={remove}
                  index={index}
                  item={item}
                  Kontrolle={Kontrolle}
                />
              );
            })}

Wenn ich das Formular absende, zeigen die Werte im Feldarray keine Daten an, während andere Felder außerhalb des Feldarrays einwandfrei funktionieren.

Dies ist der Code für die Komponente.

import { Box, Grid, IconButton, SVGIcon, TextField } from "@mui/material";
import React von "react";
importiere DeleteIcon aus '@mui/icons-material/Delete';
import { Fragment } aus "react";

const MoreFields = ({ register, delete, index, item }) =>
  zurückkehren (
    <Fragment key={item.id}>
      <Gitterelement xs={12} sm={12} md={5} lg={4}>
        <TextField
          label="Kategorie"
          Gesamtbreite
          {...register(`ticketCategory.${index}.ticketCatName`)}
          name={`ticketCategory${index}.ticketCatName`}
          defaultValue={item.ticketCatName}
        />
      </Gitter>

      <Gitterelement xs={12} sm={12} md={3} lg={3}>
        <TextField
          type="Nummer"
          label="Preis"
          Gesamtbreite
          {...register(`ticketCategory.${index}.ticketCatPrice`)}
          name={`ticketCategory${index}.ticketCatPrice`}
          defaultValue={item.ticketCatPrice}
        />
      </Gitter>

      <Gitterelement xs={12} sm={12} md={3} lg={3}>
        <TextField
          type="Nummer"
          label="Gesamt"
          Gesamtbreite
          {...register(`ticketCategory.${index}.ticketCatTotal`)}
          name={`ticketCategory${index}.ticketCatTotal`}
          defaultValue={item.ticketCatTotal}
         
        />
      </Gitter>

      <Gitterelement xs={4} sm={4} md={2} lg={2} alignSelf="center">
        <SvgIcon color='error' onClick={()=>remove(index)} sx={{cursor:'pointer'}}>
          <DeleteIcon size="medium"
        </SvgIcon>
      </Gitter>
      </Fragment>
  );
};

Standard exportieren MoreFields;

Ich kann Felder hinzufügen und entfernen, aber beim Senden werden die Werte nicht angezeigt. Ich weiß nicht warum, bitte helfen Sie mir.

Die Hooks und Funktionen, die ich verwende.

const { register, handleSubmit, control } = useForm();
  const { Felder, anhängen, voranstellen, entfernen, austauschen, verschieben, einfügen } = useFieldArray(
    {
      Kontrolle,
      Name: "ticketCategory",
    }
  );
  const addFields = () => {
    append({ TicketCatName: "", TicketCatPrice: "", TicketCatTotal: "" });
  };

  const subscribe = (data) => {
    console.log(data);
  };

Answer 1

你应该像这样同时使用相同的名称来注册和命名属性：

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

React Hook Form需要你在数组名称中添加索引，因为它使用点表示法来访问嵌套字段。例如，假设你有一个像这样的对象数组：

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

然后，每个输入的名称应该与表单数据中字段的路径相匹配。例如，第一个票类别名称输入应该具有名称ticketCategory.0.ticketCatName，第二个票类别价格输入应该具有名称ticketCategory.1.ticketCatPrice。这样，React Hook Form可以控制输入值到表单数据中。