为 Final-form-arrays 中的数组提供初始值会导致状态更改重置整个表单，我该如何防止这种情况？

Question

我有一个使用最终表单数组的表单。表单有效且验证有效，但是，当我在组件内进行状态更改时，它会重置我的所有值。

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

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

有谁知道为什么会这样？

Answer 1

2 问题。

您将内联 renderProp 传递给 Form 组件，这意味着每次组件渲染时它都会创建一个新函数，这会导致表单重置。解决方案是将 renderProp 移至上面的函数中并将其传入，最好使用 useCallback 进行记忆。
修复上述问题后，表格仍将重置。这是因为您将内联数组传递给initialValues。每次组件渲染时，这都会创建一个新数组，从而重置您的表单。将其移至变量中并传入。

这是一个非常常见的初学者错误，您应该阅读 React 如何检查引用相等性以找出要重新渲染的组件。