중첩 배열에 react-hook-form을 사용하는 방법

반응 후크 양식을 사용하여 중첩 배열을 만들려고합니다. 샘플 코드와 함께 샌드 박스를 첨부했습니다.

코드 스 니펫

<ul>
        {fields.map((item, index) => {
          return (
            <li key={item.id}>
              <label> single input </label>
              <input
                name={`test[${index}].task`}
                ref={register()}
                defaultValue={item.task}
              />
              <br />
              <label> first Name </label>
              <input
                name={`test[${index}].name.first`}
                ref={register()}
                defaultValue={item.name.first}
              />
              <br />
              <label>last Name </label>
              <input
                name={`test[${index}].name.last`}
                ref={register()}
                defaultValue={item.name.last}
              />
              <br />

              <label>First Nested </label>
              <input
                name={`test[${index}].nestedArray[${index}].firstNested`}
                ref={register()}
                // defaultValue={item.nestedArray.nested}
              />

              <br />
              <label> Second Nested </label>
              <input
                name={`test[${index}].nestedArray[${index}].secondNested`}
                ref={register()}
                // defaultValue={item.nestedArray.nested}
              />
              <br />

              <button type="button" onClick={() => remove(index)}>
                Delete
              </button>
            </li>
          );
        })}
      </ul>

발행물

초기 단계는 잘 작동합니다. "nestedArray"에서 데이터를 가져올 수 있습니다. 하지만 두 개 이상의 중첩 배열을 추가하면 데이터가 표시됩니다. 내 "nestedArray"는 항상 "null"로 시작하고 더 추가하면 "null"이 계속 추가됩니다. 이 "null"값을 어떻게 피할 수 있습니까? 이전 입력을 유지하고 싶지 않습니다. null 값을 완전히 피하고 싶습니다.

샘플 출력

{
   "test":[
      {
         "task":"single",
         "name":{
            "first":"Jack",
            "last":"Box"
         },
         "nestedArray":[
            {
               "firstNested":"firstNested",
               "secondNested":"firstSecondNested"
            }
         ]
      },
      {
         "task":"Second",
         "name":{
            "first":"Kate",
            "last":"Smith"
         },
         "nestedArray":[
            **null,**
            {
               "firstNested":"SecondNested",
               "secondNested":"SecondNestedSecond"
            }
         ]
      }
   ]
}

예상되는 샘플 출력

{
   "test":[
      {
         "task":"single",
         "name":{
            "first":"Jack",
            "last":"Box"
         },
         "nestedArray":[
            {
               "firstNested":"firstNested",
               "secondNested":"firstSecondNested"
            }
         ]
      },
      {
         "task":"Second",
         "name":{
            "first":"Kate",
            "last":"Smith"
         },
         "nestedArray":[
            {
               "firstNested":"SecondNested",
               "secondNested":"SecondNestedSecond"
            }
         ]
      }
   ]
}

Sandbox에서 재현하는 단계

1. 추가를 클릭하십시오
2. 세부 사항 제공
3. 콘솔에서 데이터보기
4. 추가 (다시)를 클릭하여 다른 데이터 세트를 추가하십시오.
5. 콘솔은 nestedArray 내부에 "null"을 표시합니다.

참고 문헌

코드 샌드 박스

코드 스 니펫

<ul>
        {fields.map((item, index) => {
          return (
            <li key={item.id}>
              <label> single input </label>
              <input
                name={`test[${index}].task`}
                ref={register()}
                defaultValue={item.task}
              />
              <br />
              <label> first Name </label>
              <input
                name={`test[${index}].name.first`}
                ref={register()}
                defaultValue={item.name.first}
              />
              <br />
              <label>last Name </label>
              <input
                name={`test[${index}].name.last`}
                ref={register()}
                defaultValue={item.name.last}
              />
              <br />

              <label>First Nested </label>
              <input
                name={`test[${index}].nestedArray[${index}].firstNested`}
                ref={register()}
                // defaultValue={item.nestedArray.nested}
              />

              <br />
              <label> Second Nested </label>
              <input
                name={`test[${index}].nestedArray[${index}].secondNested`}
                ref={register()}
                // defaultValue={item.nestedArray.nested}
              />
              <br />

              <button type="button" onClick={() => remove(index)}>
                Delete
              </button>
            </li>
          );
        })}
      </ul>