React Hook Form useFieldArray tidak boleh memaparkan data

Question

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

<Komponen kotak="bentuk" onSubmit={handleSubmit(submit)}>
      <Jarak bekas grid={2}>
        <Item grid xs={12} sm={12} md={12} lg={12}>
          <Medan Teks
            label="Nama Evnet"
            kelebaran penuh
            {...register("eventName")}
            name="eventName"
          />
        </Grid>

        <Item grid xs={12} sm={12} md={6} lg={6} alignSelf="center">
          <Medan Teks
            label="Nama Tempat Evnet"
            kelebaran penuh
            {...daftar("eventVenue")}
            name="eventVenue"
          />
        </Grid>
         <Kotak sx={{ lebar: "100%" }}>
          <Tajuk Dialog
            sx={{ fontWeight: "bold", textTransform: "huruf besar" }}
          >
            Kategori Tiket
          </DialogTitle>
        </Kotak>
        <Item grid xs={12} sm={12} md={5} lg={4}>
          <Medan Teks
            label="Kategori"
            kelebaran penuh
            {...daftar("ticketCatName")}
            name="ticketCatName"
          />
        </Grid>

        <Item grid xs={12} sm={12} md={3} lg={3}>
          <Medan Teks
            type="nombor"
            label="Harga"
            kelebaran penuh
            {...daftar("ticketCatPrice")}
            name="ticketCatPrice"
          />
        </Grid>

        <Item grid xs={12} sm={12} md={3} lg={3}>
          <Medan Teks
            type="nombor"
            label="Jumlah"
            kelebaran penuh
            {...daftar("ticketCatTotal")}
            name="ticketCatTotal"
          />
        </Grid>
Nilai ini saya peroleh apabila saya menyerahkan borang. 
</Kotak></pra>
<p>我创建了一个动态表单组件，使用map来显示。</p>
<pre class="brush:php;toolbar:false;">{fields.map((item, index) ==> {
              kembali (
                <MoreFields
                  daftar={daftar}
                  kunci={item.id}
                  buang={buang}
                  indeks={indeks}
                  item={item}
                  kawalan={kawalan}
                />
              );
            })}</pra>
<p>Apabila saya menyerahkan borang, nilai dalam tatasusunan medan tidak memaparkan data, manakala medan lain di luar tatasusunan medan berfungsi dengan baik. </p>
<p>Ini ialah kod untuk komponen. </p>
<pre class="brush:php;toolbar:false;">import { Box, Grid, IconButton, SvgIcon, TextField } daripada "@mui/material";
import React daripada "react";
import DeleteIcon daripada '@mui/icons-material/Delete';
import { Fragment } daripada "react";

const MoreFields = ({ daftar, alih keluar, indeks, item }) =>
  kembali (
    <Kunci serpihan={item.id}>
      <Item grid xs={12} sm={12} md={5} lg={4}>
        <Medan Teks
          label="Kategori"
          kelebaran penuh
          {...register(`ticketCategory.${index}.ticketCatName`)}
          name={`ticketCategory${index}.ticketCatName`}
          defaultValue={item.ticketCatName}
        />
      </Grid>

      <Item grid xs={12} sm={12} md={3} lg={3}>
        <Medan Teks
          type="nombor"
          label="Harga"
          kelebaran penuh
          {...register(`ticketCategory.${index}.ticketCatPrice`)}
          name={`ticketCategory${index}.ticketCatPrice`}
          defaultValue={item.ticketCatPrice}
        />
      </Grid>

      <Item grid xs={12} sm={12} md={3} lg={3}>
        <Medan Teks
          type="nombor"
          label="Jumlah"
          kelebaran penuh
          {...register(`ticketCategory.${index}.ticketCatTotal`)}
          name={`ticketCategory${index}.ticketCatTotal`}
          defaultValue={item.ticketCatTotal}
         
        />
      </Grid>

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

eksport lalai MoreFields;

Saya boleh menambah dan mengalih keluar medan, tetapi apabila diserahkan, nilainya tidak muncul. Tidak tahu mengapa, tolong bantu saya.

Cakuk dan fungsi yang saya gunakan.

const { register, handleSubmit, control } = useForm();
  const { fields, add, prepend, remove, swap, move, insert } = useFieldArray(
    {
      kawalan,
      nama: "Kategori tiket",
    }
  );
  const addFields = () => {
    tambahkan({ ticketCatName: "", ticketCatPrice: "", ticketCatTotal: "" });
  };

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

Answer 1

Anda hendaklah mendaftar dan menamakan hartanah dengan nama yang sama seperti ini:

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

Borang React Hook memerlukan anda menambah indeks dalam nama tatasusunan kerana ia menggunakan tatatanda titik untuk mengakses medan bersarang. Sebagai contoh, katakan anda mempunyai pelbagai objek seperti ini:

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

Nama setiap input hendaklah sepadan dengan laluan ke medan dalam data borang. Contohnya, input nama kategori tiket pertama harus mempunyai nama ticketCategory.0.ticketCatName，第二个票类别价格输入应该具有名称ticketCategory.1.ticketCatPrice. Dengan cara ini, React Hook Form boleh mengawal nilai input ke dalam data borang.