大家好，我使用React Hook Form和useFieldArray Hook创建了一个Material UI表单。

<Box component="form" onSubmit={handleSubmit(submit)}>
      <Grid container spacing={2}>
        <Grid item xs={12} sm={12} md={12} lg={12}>
          <TextField
            label="Evnet Name"
            fullWidth
            {...register("eventName")}
            name="eventName"
          />
        </Grid>

        <Grid item xs={12} sm={12} md={6} lg={6} alignSelf="center">
          <TextField
            label="Evnet Venue Name"
            fullWidth
            {...register("eventVenue")}
            name="eventVenue"
          />
        </Grid>
         <Box sx={{ width: "100%" }}>
          <DialogTitle
            sx={{ fontWeight: "bold", textTransform: "uppercase" }}
          >
            Ticket Category
          </DialogTitle>
        </Box>
        <Grid item xs={12} sm={12} md={5} lg={4}>
          <TextField
            label="Category"
            fullWidth
            {...register("ticketCatName")}
            name="ticketCatName"
          />
        </Grid>

        <Grid item xs={12} sm={12} md={3} lg={3}>
          <TextField
            type="number"
            label="Price"
            fullWidth
            {...register("ticketCatPrice")}
            name="ticketCatPrice"
          />
        </Grid>

        <Grid item xs={12} sm={12} md={3} lg={3}>
          <TextField
            type="number"
            label="Total"
            fullWidth
            {...register("ticketCatTotal")}
            name="ticketCatTotal"
          />
        </Grid>
This Values I am getting when I submit the form. 
</Box>

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

{fields.map((item, index) => {
              return (
                <MoreFields
                  register={register}
                  key={item.id}
                  remove={remove}
                  index={index}
                  item={item}
                  control={control}
                />
              );
            })}

当我提交表单时，fields数组中的值不显示数据，而fields数组之外的其他字段正常工作。

这是组件的代码。

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

const MoreFields = ({ register, remove, index, item }) => {
  return (
    <Fragment key={item.id}>
      <Grid item xs={12} sm={12} md={5} lg={4}>
        <TextField
          label="Category"
          fullWidth
          {...register(`ticketCategory.${index}.ticketCatName`)}
          name={`ticketCategory${index}.ticketCatName`}
          defaultValue={item.ticketCatName}
        />
      </Grid>

      <Grid item xs={12} sm={12} md={3} lg={3}>
        <TextField
          type="number"
          label="Price"
          fullWidth
          {...register(`ticketCategory.${index}.ticketCatPrice`)}
          name={`ticketCategory${index}.ticketCatPrice`}
          defaultValue={item.ticketCatPrice}
        />
      </Grid>

      <Grid item xs={12} sm={12} md={3} lg={3}>
        <TextField
          type="number"
          label="Total"
          fullWidth
          {...register(`ticketCategory.${index}.ticketCatTotal`)}
          name={`ticketCategory${index}.ticketCatTotal`}
          defaultValue={item.ticketCatTotal}
         
        />
      </Grid>

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

export default MoreFields;

我可以添加和删除字段，但是当提交时，值不会显示。不知道为什么，请帮帮我。

我正在使用的hooks和函数。

const { register, handleSubmit, control } = useForm();
  const { fields, append, prepend, remove, swap, move, insert } = useFieldArray(
    {
      control,
      name: "ticketCategory",
    }
  );
  const addFields = () => {
    append({ ticketCatName: "", ticketCatPrice: "", ticketCatTotal: "" });
  };

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