reactjs - 有没有办法使用带有 useFieldArray 钩子(Hook)的 react 钩子(Hook)形式在子组件中设置默认值 - 不使用 useForm 钩子(Hook)？

Question

问题

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

• 参见 animated gif on dynamic fields .

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

• 参见 animated gif on displaying saved dynamic fields .

先决条件

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

工作解决方案

在简化的应用程序中，我有一个使用 useForm 的父组件钩子(Hook)和两个子组件，一个用于演示持有正常表单字段和一个 <ArrayFields />包含数组字段的组件。

昨天我通过this answer了解到一种方法是设置 defaultValues父对象的 useForm 钩子(Hook)中的对象是这样的:

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

在这里你可以看到一个codesandbox of this working solution .

问题

尽管如此，我想知道是否无法设置 defaultValues在<ArrayFields />子组件？

使用FormContext方法

例如像这样使用 useFormContext钩子(Hook):

// 
const ArrayFields = ({ fieldset }) => {
  const { control, getValues } = useFormContext({
    defaultValues: {
      envRoles: [
        { envName: "foo1", envRole: "bar1" },
        { envName: "foo2", envRole: "bar2" }
      ]
    }
  });
  const { fields, append, remove } = useFieldArray({
    control,
    name: "envRoles"
  });

  ...
}

• 但这根本不显示保存的字段
• 请参阅此处 a codesandbox version of the useFormContext approach

Prop 方法

接下来，我尝试将字段(别名 envRoles)作为 Prop 传递并设置 defaultValues直接给 Controller

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

// ArrayFields.js:35
<Controller
  render={({ field }) => <input {...field} />}
  defaultValue={item.envName}                   {/* <-- defaultValue on Controller */}
  name={`envRoles[${index}].envName`}
  control={control}
/>

• 这会显示 defaultValues
• 但在点击添加或删除按钮时不起作用
• 参见 this codesandbox of the props approach

再提问

那么 RHF 是否真的不允许在该组件内部处理对组件重要的所有事情？

提前感谢您的提示。

Answer 1

我想我找到了答案。 🙊

In the documentation在 useFieldArray 中，您会找到 replace 方法。

replace (obj: object[]) => void     Replace the entire field array values.

所以使用 useEffect Hook 终于变得简单了。

useEffect(() => {
  replace(fieldset);
}, [fieldset, replace]);

在this codesandbox您会发现最终可以在子组件中设置默认值的示例。