我想要一个字段数组，可以由用户通过添加无限数量的输入文本字段的键/值对来生成。提交表单后，应保存字段，当返回表单时，应显示提交的字段数组并具有相同的功能。这意味着用户应该能够再次添加输入文本字段的新键/值对或删除它们。

该表单具有单独的组件，其中之一使用 React Hook Form 的 useFieldArray 钩子。输入组件是受控组件。

我在codesandbox上做了一个简单的应用程序。

首先，如果您单击添加按钮，一切看起来都很好。添加并提交字段。

但我不知道如何显示fieldset传递给 ArrayFields 组件的 prop 值，请参阅index.js:30

<ArrayFields
  fieldset={[
    { envName: "foo1", envRole: "bar1" },
    { envName: "foo2", envRole: "bar2" }
  ]}
/>

我尝试使用 useForm 挂钩设置 defaultValues，但它不起作用。

我是反应新手，当然也是反应钩子形式。如果我正确理解了 React hook form，那么无论如何最好依赖 useFormContext hook 并使用 useFieldArray hook 中的字段，请参阅ArrayFields.js:6。

在ArrayFields.js:24-26我尝试复制道具以便将字段与字段集合并。

const allFields = [...fields];                  // This does not display the passed prop values, alias fieldset
// const allFields = [...fieldset];             // This displays the passed …

问题

我想以可由用户添加的表单实现输入字段的键/值对。

• 请参阅动态字段上的动画 gif。

另外，我想在用户提交表单并再次显示页面时显示保存的数据。

• 请参阅有关显示保存的动态字段的动画 gif。

前提条件

• 我正在使用react-hook-form V7(RHF) 及其useFieldArray钩子。
• 当我使用 Material-UI 时，我必须使用controlled components.

工作溶液

在一个简化的应用程序中，我有一个使用useForm钩子的父组件和两个子组件，一个用于演示保存普通表单字段，另一个<ArrayFields />组件用于保存数组字段。

昨天我通过这个答案了解到，一种方法是在父级的 useForm 挂钩中设置对象，defaultValues如下所示：

const methods = useForm({
    defaultValues: {
      email: "john.smith@example.com",
      firstName: "John",
      lastName: "Smith",
      systemRole: "Admin",
      envRoles: [                             // <-- saved dynamic fields
        { envName: "foo1", envRole: "bar1" },
        { envName: "foo2", envRole: "bar2" }
      ]
    }
  });

在这里您可以看到此工作解决方案的代码和框。

问题

尽管如此，我想知道是否无法 …