react-final-form - 无法在最终表单数组上设置 initialValue

Question

我FieldArray在 React Final Form 中设置组件的 initialValue 时遇到问题。当我在Form组件上设置它时它可以工作，但在FieldArray. 请参阅下面的 CodeSandbox 示例：

在 FieldArray 上： https ://codesandbox.io/s/react-final-form-field-arrays-vq9pz

在表单上： https ://codesandbox.io/s/react-final-form-field-arrays-v90nn

我希望将它设置在 FieldArray 上，如果我查看此处的文档，这似乎应该是可能的。有没有其他人遇到过这个？

Answer 1

的实现在版本initialValue中引入3.1.3。

在沙箱中更改react-final-form-arraysto的版本。3.1.3

您还需要将版本更改react-final-form为6.5.2

Answer 2

您可以const customer = { firstName: "test", lastName: "test" };在这里定义然后使用它：

<button type="button" onClick={() => push("customers", customer)}>
  Add Customer
</button>

这是 CodeSandbox 示例https://codesandbox.io/s/react-final-form-field-arrays-vmmf3?fontsize=14。

Answer 3

通常我会像这样创建一个mutator：

   <Form
     mutators={{
       ...arrayMutators,

       addCustomer: (_, state, { changeValue }) => {
         changeValue(state, "customers", (v) => [
           ...v || [],
           { firstName: 'abc', lastName: 'efg' },
         ]);
       },

     }}
     ...

并更改添加客户按钮onClick={() => form.mutators.addCustomer()}