React Hook Form's useFieldArray cannot display data

Question

大家好，我使用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}
                />
              );
            })}

When I submit the form, the values ​​in the fields array do not display data, while other fields outside the fields array work fine.

This is the code for the component.

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;

I can add and remove fields, but when submitted, the values ​​don't show up. Don't know why, please help me.

The hooks and functions I'm using.

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

Answer 1

You should both register and name the property with the same name like this:

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

React Hook Form requires you to add an index in the array name because it uses dot notation to access nested fields. For example, suppose you have an array of objects like this:

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

The name of each input should then match the path to the field in the form data. For example, the first ticket category name input should have the name ticketCategory.0.ticketCatName and the second ticket category price input should have the name ticketCategory.1.ticketCatPrice. In this way, React Hook Form can control input values ​​into form data.