如何在react-hook-forms的受控组件中使用useFieldArray挂钩显示defaultValues

Question

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

该表单具有单独的组件，其中之一使用 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 prop values but adding field no longer works.
// const allFields = [...fieldset, ...fields];  // This results in weird add button adding multiple fields at once.

那么我在这里能做什么呢？非常感谢您的评论。

---

代码沙盒

该应用程序基于

• React Hook Form 7
• React 17

Answer 1

不要将默认值传递给ArrayFields组件，只需在 useForm 挂钩中设置默认值，如下所示。

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

检查此代码和框。我更新了你的代码。