首頁  >  問答  >  主體

React Hook Form的useFieldArray無法顯示數據

大家好,我使用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>
P粉176151589P粉176151589437 天前558

全部回覆(1)我來回復

  • P粉250422045

    P粉2504220452023-09-02 10:25:28

    你應該同時使用相同的名稱來註冊和命名屬性:

    <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可以控制輸入值到表單資料中。

    回覆
    0
  • 取消回覆