在final-form-arrays中为数组提供initialValues会导致状态更改以重置整个表单，我该如何防止呢？

Question

我有一个使用final-form-arrays的表单。表单有效且验证有效，但是，当我在组件内部进行状态更改时，它将重置我的所有值。

我能够使用react-final-form-arrays提供的示例复制问题：

https://codesandbox.io/embed/react-final-form-field-arrays-om6p6

我添加了一个按钮来切换状态更改。本质上，只需尝试填写表单中的值，然后更改状态即可。表格将重置，我不知道为什么会这样。如果我删除initialValues，这不会发生。

有人知道为什么会这样吗？

Answer 1

2个问题。

1. 您要将一个内联renderProp传递给Form组件，这意味着每次您的组件渲染时都会创建一个新函数，这会导致您的表单重置。解决方案是将renderProp移到上方的函数中并传入，理想情况下使用useCallback进行记忆。
2. 修复以上问题后，表格仍将重置。这是因为要将内联数组传递给initialValues。每当您的组件渲染时，这将再次创建一个新数组，这将重置您的表单。将其移入变量并传递。

这是一个非常常见的初学者错误，您应该阅读有关参考相等性检查如何反应以找出要重新渲染哪些组件的信息。

固定版本：https://codesandbox.io/embed/react-final-form-field-arrays-c6hgu

Answer 2

只需将您的initialValues记住在一个箭头函数中，然后将其传递给表单组件即可：

const initialValues = useCallback(() => {
    return {data: [{}]};
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

将该函数作为表单组件的initialValues属性传递。