无法在最终表单数组上设置初始值

Question

我在 React Final Form 中设置FieldArray组件的初始值时遇到问题。 当我在Form组件上设置它时它可以工作，但在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-arrays的版本更改为沙盒中的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

通常我会创建一个这样的突变器：

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

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