javascript - 如何在 react 中验证多步表单

Question

我有一个多步骤表单，我正在使用 react 进行验证，我正在使用 react-hook-form .
我已经完成了 90% 的事情，只是我面临的问题是获取动态的第二种形式数据。
我正在做的是

在我的第一个表单中，当填写(验证)时，我有两个字段，我将进入下一个表单

在我的下一个表单中，我有两个输入字段，在添加按钮上，用户也可以添加多行字段，这些都可以正常工作

问题

现在，当我以第二种形式创建新字段时，我想验证它们，但不知道该怎么做。

我做了什么
在我的主要组件中，我这样做是为了验证

const forms = [
  {
    fields: ['desig', 'dept'],
    component: () => (
      <Pro register={register} errors={errors} defaultValues={defaultValues} />
    ),
  },
  {
    fields: [
      `userInfo[0].fname`, // here I am facing issue if I am statically putting 0,1 then it is validating that perticular form
      `userInfo[0].sirname`,
    ],
    component: () => (
      <Basic
        register={register}
        errors={errors}
        defaultValues={defaultValues}
        inputHolder={inputHolder}
        deleteRow={deleteRow}
        addRow={addRow}
      />
    ),
  },
];

点击提交，我正在这样做

const handleSubmit = (e) => {
  triggerValidation(forms[currentForm].fields).then((valid) => {
    if (valid) {
      console.log('whole form data - ', JSON.stringify(defaultValues));
    }
  });
};

如果在form2中添加了两个数据，我想要如下数据

    {
  "fname": "dsteve",
  "sname": "smith",
  "userInfo": [
    {
      "desig": "ddd",
      "dept": "deptee"
    },
    {
      "desig": "ddd",
      "dept": "deptee"
    }
  ]
}

我已经做了所有事情，但只有我被卡住了，我知道问题出在哪里
而不是这个

fields: ["fname", "sname"],

我必须这样做

fields:[`userInfo[0].name, `userInfo[0].sname],

这个 0-1 我必须根据索引进行动态化，我不知道我缺少什么
我尝试通过 inputHolder 映射具有索引的字段但它没有用
编辑/更新
如果我这样做

fields:[`userInfo[0].name`,`userInfo[1].name`, `userInfo[0].sname`,`userInfo[1].sname],

所以它对两个字段进行验证，但这是我手动操作的，如果用户创建更多字段，那么应该动态地获取这些字段。
这是我的代码沙箱，其中包含完整的代码
Here is my code sandbox
我愿意使用任何新方法，但应该使用 react-hook-form并填满我想做的
我现在不知道如何推进我的方法

Answer 1

您可以创建一个包含 2 个空字符串的数组，其中第一个表示第一行 F 名称，并且
第二个代表MainComponent中您的inputHolder下的第一行S名称:

 const [inputHolder, setinputHolder] = useState([
    {
      id: 1,
      fname: "",
      sname: ""
    }
  ]);
  const [names, setNames] = useState(["", ""]);

接下来，每次用户发布新行时，您都会将其添加到名称数组中的空字符串中。

 const addRow = () => {
    console.log(inputHolder.length);
    let item = {
      id: inputHolder.length + 1,
      fname: "",
      sname: ""
    };
    setinputHolder([...inputHolder, item]);
    setNames([...names, "", ""]);
   
  };

其中每个空字符串代表 F 名称和 S 名称。
最后，fields 设置为第二种形式的名称:

fields: names,
      component: (register, errors, defaultValues) => (
        <Form2
          register={register}
          errors={errors}
          defaultValues={defaultValues}
          inputHolder={inputHolder}
          addRow={addRow}
        />