React Hook Form的useFieldArray无法显示数据

Question

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

      <网格容器间距={2}>
        <网格项 xs={12} sm={12} md={12} lg={12}>
          <文本字段
            label="Evnet 名称"
            全屏宽度
            {...注册(“事件名称”)}
            name="事件名称"
          >>
        </网格>

        <网格项 xs={12} sm={12} md={6} lg={6}alignSelf=“center”>
          <文本字段
            label="Evnet 场地名称"
            全屏宽度
            {...注册(“事件地点”)}
            name="活动地点"
          >>
        </网格>
         <框sx={{宽度：“100%” }}>
          <对话框标题
            sx={{ fontWeight: “粗体”, textTransform: “大写”; }}
          >
            门票类别
          </对话框标题>
        </框>
        <网格项xs={12} sm={12} md={5} lg={4}>
          <文本字段
            标签=“类别”
            全屏宽度
            {...注册(“ticketCatName”)}
            name="ticketCatName";
          >>
        </网格>

        <网格项xs={12} sm={12} md={3} lg={3}>
          <文本字段
            类型=“数字”
            label="价格";
            全屏宽度
            {...注册(“ticketCatPrice”)}
            name="ticketCatPrice";
          >>
        </网格>

        <网格项xs={12} sm={12} md={3} lg={3}>
          <文本字段
            类型=“数字”
            标签=“总计”
            全屏宽度
            {...注册(“ticketCatTotal”)}
            name=“ticketCatTotal”
          >>
        </网格>
这是我提交表单时得到的值。 
</框></pre>
<p>我创建了一个动态表单组件，使用地图来显示。</p>
<pre class="brush:php;toolbar:false;">{fields.map((item, index) => {
              return (
                <MoreFields
                  register={register}
                  key={item.id}
                  remove={remove}
                  index={index}
                  item={item}
                  control={control}
                />
              );
            })}</pre>
<p>当我提交表单时，fields数组中的值不显示数据，而fields数组之外的其他字段正常工作。</p>
<p>这是组件的代码。</p>
<pre class="brush:php;toolbar:false;">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;</pre>
<p>我可以添加和删除字段，但是当提交时，值不会显示。不知道为什么，请帮帮我。</p>
<p>我正在使用的hooks和函数。</p>
const { 注册、handleSubmit、控制 } = useForm();
  const { 字段、追加、前置、删除、交换、移动、插入 } = useFieldArray(
    {
      控制，
      名称：“门票类别”，
    }
  ）；
  const addFields = () =>; {
    追加（{ticketCatName：“”，ticketCatPrice：“”，ticketCatTotal：“”}）;
  };

  const 提交 = (数据) => {
    控制台.log(数据);
  };</pre></p>

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可以控制输入值到表单数据中。