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

Question

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

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

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

有谁知道为什么会这样？

score 3 · Accepted Answer

2个问题。

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

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

score 0 · Accepted Answer

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

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

将函数作为 Form 组件的 initialValues 属性传递。

2 回答 2