如何将 react-hook-form 用于嵌套数组

Question

我正在尝试使用反应钩子形式来创建嵌套数组。我已经用我的示例代码附加了一个沙盒

代码片段

<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”会继续添加。我怎样才能避免这个“空”值？我不想保留以前的输入。我想完全避免空值。

样本输出

{
   "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"
            }
         ]
      }
   ]
}

在沙盒中重现的步骤

1. 点击追加
2. 提供详细信息
3. 在控制台中查看数据
4. 点击追加（再次）添加另一组数据
5. 控制台将在嵌套数组中显示“null”。

参考文献

Code Sandbox

代码片段

<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>

Answer 1

让我知道这是否有效。也许您不需要索引嵌套数组，因为它已被映射。它在我没有空值的情况下在控制台中工作。我认为既然您已经将“测试”作为目标：

`test[${index}].nestedArray.firstNested`

您可能也不需要为 nestedArray 编制索引？

      <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.firstNested`} //removed index
                ref={register()}
                // defaultValue={item.nestedArray.nested}
              />

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

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

Answer 2

这个怎么样，这行得通吗，它保留了数组括号并且没有空值。

也许由于地图索引增加，nestedArray 过滤当前地图索引中的值，但由于它还没有进入下一个索引，它会为该迭代创建一个空值。

代码：https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-forked-9sxrt?file=/src/fieldArray.js:302-1778

      <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[0].firstNested`} //changed index to 0
                ref={register()}
                // defaultValue={item.nestedArray.nested}
              />

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

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