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

Question

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

表单有单独的组件，其中之一使用 React Hook 表单的 useFieldArray 挂钩。输入组件为受控组件

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

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

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

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

我尝试使用 useForm 挂钩设置默认值，但没有成功。

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

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

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.

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

codesandbox

该应用基于

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" }
      ]
    }
  });

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

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

How to display defaultValues with useFieldArray hook in controlled components in react-hook-forms

reactjs

react-hook-form