React Hook Form の useFieldArray がデータを表示できない

Question

よろしくお願いします。React Hook Form と useFieldArray Hook を使用してマテリアル UI テーブルを作成しました。

<Box コンポーネント="form" onSubmit={ハンドルサブミット(送信)}>
      <グリッドコンテナの間隔={2}>
        <グリッド項目 xs={12} sm={12} md={12} lg={12}>
          <テキストフィールド
            label="エブネット名"
            全幅
            {...register("イベント名")}
            名前="イベント名"
          />
        </グリッド>

        <グリッド項目 xs={12} sm={12} md={6} lg={6} alignSelf="center">
          <テキストフィールド
            label="イベント会場名"
            全幅
            {...登録("イベント会場")}
            name="イベント会場"
          />
        </グリッド>
         <ボックス sx={{ 幅: "100%" }}>
          <ダイアログタイトル
            sx={{ fontWeight: "太字"、textTransform: "大文字" }}
          >
            チケットカテゴリー
          </ダイアログタイトル>
        </ボックス>
        <グリッド項目 xs={12} sm={12} md={5} lg={4}>
          <テキストフィールド
            ラベル=「カテゴリ」
            全幅
            {...登録("チケット猫名")}
            name="チケット猫名"
          />
        </グリッド>

        <グリッド項目 xs={12} sm={12} md={3} lg={3}>
          <テキストフィールド
            タイプ=「数値」
            ラベル="価格"
            全幅
            {...register("ticketCatPrice")}
            name="ticketCatPrice"
          />
        </グリッド>

        <グリッド項目 xs={12} sm={12} md={3} lg={3}>
          <テキストフィールド
            タイプ=「数値」
            ラベル="合計"
            全幅
            {...登録("ticketCatTotal")}
            name="ticketCatTotal"
          />
        </グリッド>
この値は、フォームを送信したときに取得されます。
</ボックス>

私たちはマップを使用して表示するための動的表現コンポーネントを作成しました。

{fields.map((item,index) => {
              戻る （
                <その他のフィールド
                  register={登録}
                  key={アイテム.id}
                  削除={削除}
                  インデックス={インデックス}
                  アイテム={アイテム}
                  コントロール={コントロール}
                />
              );
            })}
<p>フォームを送信すると、フィールド配列内の値にはデータが表示されませんが、フィールド配列外の他のフィールドは正常に機能します。 </p>
<p>これはコンポーネントのコードです。 </p>
<pre class="brush:php;toolbar:false;">import { Box, Grid, IconButton, SvgIcon, TextField } from "@mui/material";
"react" から React をインポートします。
'@mui/icons-material/Delete' から DeleteIcon をインポートします。
import { フラグメント } from "react";

const MoreFields = ({ 登録、削除、インデックス、項目 }) => {
  戻る （
    <フラグメントキー={item.id}>
      <グリッド項目 xs={12} sm={12} md={5} lg={4}>
        <テキストフィールド
          ラベル=「カテゴリ」
          全幅
          {...register(`ticketCategory.${index}.ticketCatName`)}
          name={`チケットカテゴリー${インデックス}.チケットキャット名`}
          defaultValue={item.ticketCatName}
        />
      </グリッド>

      <グリッド項目 xs={12} sm={12} md={3} lg={3}>
        <テキストフィールド
          タイプ=「数値」
          ラベル="価格"
          全幅
          {...register(`ticketCategory.${index}.ticketCatPrice`)}
          name={`ticketCategory${index}.ticketCatPrice`}
          デフォルト値={item.ticketCatPrice}
        />
      </グリッド>

      <グリッド項目 xs={12} sm={12} md={3} lg={3}>
        <テキストフィールド
          タイプ=「数値」
          ラベル="合計"
          全幅
          {...register(`ticketCategory.${index}.ticketCatTotal`)}
          name={`ticketCategory${index}.ticketCatTotal`}
          defaultValue={item.ticketCatTotal}
         
        />
      </グリッド>

      <グリッド項目 xs={4} sm={4} md={2} lg={2} alignSelf="center">
        <SvgIcon color='error' onClick={()=>remove(index)} sx={{cursor:'pointer'}}>
          <削除アイコン サイズ = "中" />
        </SvgIcon>
      </グリッド>
      </フラグメント>
  );
};

デフォルトの MoreFields;

をエクスポートします。

フィールドを追加および削除できますが、送信時に値が表示されません。理由がわかりません、助けてください。

私が使用しているフックと関数。

const { register, handleSubmit, control } = useForm();
  const { フィールド、追加、先頭に追加、削除、交換、移動、挿入 } = useFieldArray(
    {
      コントロール、
      名前: "チケットカテゴリ"、
    }
  );
  const addFields = () => {
    append({ ticketCatName: "", ticketCatPrice: "", ticketCatTotal: "" });
  };

  const submit = (データ) => {
    コンソール.ログ(データ);
  };

Answer 1

次のように、プロパティを登録し、同じ名前を付ける必要があります:

リーリー

React Hook Form では、ネストされたフィールドにアクセスするためにドット表記を使用するため、配列名にインデックスを追加する必要があります。たとえば、次のようなオブジェクトの配列があるとします。

リーリー

各入力の名前は、フォーム データ内のフィールドへのパスと一致する必要があります。たとえば、最初のチケット カテゴリ名の入力には ticketCategory.0.ticketCatName という名前を付け、2 番目のチケット カテゴリの価格の入力には ticketCategory.1.ticketCatPrice という名前を付ける必要があります。このようにして、React Hook Form はフォームデータへの入力値を制御することができます。