React Hook Form의 useFieldArray가 데이터를 표시할 수 없습니다.

Question

大家好，저희는 React Hook Form과 useFieldArray Hook을 사용하여 Material UI表单를 사용합니다.

<상자 구성요소="양식" onSubmit={handleSubmit(제출)}>
      <그리드 컨테이너 간격={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: "bold", textTransform: "대문자" }}
          >
            티켓 카테고리
          </DialogTitle>
        </박스>
        <그리드 항목 xs={12} sm={12} md={5} lg={4}>
          <텍스트 필드
            label="카테고리"
            전체 넓이
            {...등록("ticketCatName")}
            name="ticketCatName"
          />
        </그리드>

        <그리드 항목 xs={12} sm={12} md={3} lg={3}>
          <텍스트 필드
            유형="번호"
            label="가격"
            전체 넓이
            {...등록("ticketCatPrice")}
            name="ticketCatPrice";
          />
        </그리드>

        <그리드 항목 xs={12} sm={12} md={3} lg={3}>
          <텍스트 필드
            유형="번호"
            label="전체"
            전체 넓이
            {...등록("ticketCatTotal")}
            name="ticketCatTotal"
          />
        </그리드>
양식을 제출할 때 얻는 값입니다. 
</박스>

저는 지도를 사용하여 지도를 사용합니다.

{fields.map((item, index) => {
              반품 (
                <더보기필드
                  등록={등록}
                  키={item.id}
                  제거={제거}
                  색인={색인}
                  항목={항목}
                  컨트롤={컨트롤}
                />
              );
            })}

양식을 제출하면 필드 배열의 값이 데이터를 표시하지 않는 반면 필드 배열 외부의 다른 필드는 제대로 작동합니다.

구성요소에 대한 코드입니다.

import { Box, Grid, IconButton, SvgIcon, TextField } from "@mui/material"
"반응"에서 반응을 가져옵니다;;
'@mui/icons-material/Delete'에서 삭제 아이콘을 가져옵니다.
import { Fragment } from "react"

const MoreFields = ({ 등록, 제거, 색인, 항목 }) =>
  반품 (
    <조각 키={item.id}>
      <그리드 항목 xs={12} sm={12} md={5} lg={4}>
        <텍스트 필드
          label="카테고리"
          전체 넓이
          {...register(`ticketCategory.${index}.ticketCatName`)}
          이름={`ticketCategory${index}.ticketCatName`}
          defaultValue={item.ticketCatName}
        />
      </그리드>

      <그리드 항목 xs={12} sm={12} md={3} lg={3}>
        <텍스트 필드
          유형="번호"
          label="가격"
          전체 넓이
          {...register(`ticketCategory.${index}.ticketCatPrice`)}
          이름={`ticketCategory${index}.ticketCatPrice`}
          defaultValue={item.ticketCatPrice}
        />
      </그리드>

      <그리드 항목 xs={12} sm={12} md={3} lg={3}>
        <텍스트 필드
          유형="번호"
          label="전체"
          전체 넓이
          {...register(`ticketCategory.${index}.ticketCatTotal`)}
          이름={`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'}}>
          <DeleteIcon 크기="중간"
        </SvgIcon>
      </그리드>
      </조각>
  );
};

기본 MoreFields;

내보내기

필드를 추가하고 제거할 수 있지만 제출하면 값이 표시되지 않습니다. 이유를 모르겠습니다. 도와주세요.

내가 사용하고 있는 후크와 기능입니다.

const { 레지스터, 핸들 제출, 제어 } = useForm();
  const { 필드, 추가, 앞에 추가, 제거, 교환, 이동, 삽입 } = useFieldArray(
    {
      제어,
      이름: "티켓카테고리",
    }
  );
  const addFields = () => {
    Append({ ticketCatName: "", ticketCatPrice: "", ticketCatTotal: "" });
  };

  const 제출 = (데이터) => {
    console.log(데이터);
  };

Answer 1

다음과 같이 동일한 이름으로 부동산을 등록하고 이름을 지정해야 합니다.

으아악

React Hook Form은 중첩 필드에 액세스하기 위해 점 표기법을 사용하므로 배열 이름에 인덱스를 추가해야 합니다. 예를 들어, 다음과 같은 객체 배열이 있다고 가정해 보겠습니다.

으아악

각 입력의 이름은 양식 데이터의 필드 경로와 일치해야 합니다. 예를 들어, 첫 번째 티켓 카테고리 이름 입력에는 ticketCategory.0.ticketCatName，第二个票类别价格输入应该具有名称ticketCategory.1.ticketCatPrice라는 이름이 있어야 합니다. 이런 방식으로 React Hook Form은 입력값을 폼 데이터로 제어할 수 있습니다.