在final- form -arrays中为数组提供initialValues会导致状态更改重置整个表单，如何防止这种情况？

Question

我有一个使用最终形式数组的表单。表单和验证工作正常，但是，当我在组件内部进行状态更改时，它会重置我的所有值。

我能够用react-final-form-arrays提供的相同示例复制这个问题：

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

我添加了一个按钮来切换状态更改。本质上，只需尝试在表单中填充值，然后更改状态。表单将会重置，但我不明白为什么会这样。如果删除initialValues，则不会发生这种情况。

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

Answer 1

2个问题。

1. 您正在向Form组件传递一个内联renderProp，这意味着它会在您的组件每次呈现时创建一个新函数，这会导致您的form重置。解决方案是将renderProp移动到上面的一个函数中，并传入该函数，理想情况下，使用useCallback.
2. Once进行记忆修复后，表单仍然会重置。这是因为您正在将一个内联数组传递给initialValues。这也会在你的组件每次渲染时创建一个新的数组，这会重置你的表单。将其移动到变量中并传入。

这是一个非常常见的初学者错误，你应该仔细阅读react是如何进行引用相等检查的，以确定要重新呈现哪些组件。

固定版本：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属性传递。