以 react-hook-form 重置嵌套数组

Question

我尝试重置反应钩子形式的嵌套数组但没有成功 我创建了以下沙箱 sandbox

Answer 1

可以按照嵌套的 useFieldArray 示例 here 解决您的问题。该示例是由库的作者创建的。我不知道为什么会这样，这可能是库错误或怪癖，因为作者从不希望您以这种方式编写代码..

基本上，您需要通过将嵌套字段放在 child 组件中而不是将所有内容放在一个大组件中来重构您的代码。所以改变这个：

const { fields, remove } = useFieldArray({
  control,
  name: "names"
});

const { fields: nested } = useFieldArray({
  control,
  name: "names[0].nested"
});

<ul>
  {fields.map((item, index) => {
    return (
      <li key={item.id}>
        <input
          name={`names[${index}].firstName`}
          defaultValue={`${item.firstName}`}
          ref={register()}
        />
        <ul>
          {nested.map((nestedItem, nestedIndex) => {
            return (
              <li key={item.id}>
                <input
                  name={`names[${index}].nested[${nestedIndex}].lastName`}
                  defaultValue={`${nestedItem.lastName}`}
                  ref={register()}
                />
              </li>
            );
          })}
        </ul>
      </li>
    );
  })}
</ul>

像这样：

Parent

const { fields, remove } = useFieldArray({
  control,
  name: "names"
});

<ul>
  {fields.map((item, index) => {
    return (
      <li key={item.id}>
        <input
          name={`names[${index}].firstName`}
          defaultValue={`${item.firstName}`}
          ref={register()}
        />
        <NestedArray
          index={index}
          control={control}
          register={register}
        />
      </li>
    );
  })}
</ul>

嵌套数组

const { fields, remove } = useFieldArray({
  control,
  name: "names[0].nested"
});

return (
  <ul>
    {fields.map((nestedItem, nestedIndex) => {
      return (
        <li key={nestedItem.id}>
          <input
            name={`names[${index}].nested[${nestedIndex}].lastName`}
            defaultValue={`${nestedItem.lastName}`}
            ref={register()}
          />
        </li>
      );
    })}
  </ul>
);

现场演示