React-Final-Form:从 props 设置初始值，在 props 更改时重置表单状态

Question

我有一个组件，它需要一个 balance Prop ，而这个平衡 Prop 会随着时间而改变。

然后我有一个 React Final Form 来发送交易，通常的字段是发送，接收者......在我的 validate 中，我只是检查用户是否有足够的余额来发送交易。

但是，如果我的余额在用户输入内容时发生变化，则整个表单将重置。你将如何只重置表单状态的一部分？

有关示例，请参见此代码和框:https://codesandbox.io/s/jn69xql7y3 :

输入东西

等待 5 秒

再次看到表单状态为空白

Answer 1

我刚刚遇到这个问题 react-final-form当包装组件中发生任何状态更改时，表单将完全重置。

问题就在这里(来自你的代码和盒子)

<Form
  initialValues={{ amount: 0, balance }} <-- creates a new object on every render

问题是当 initialValues更改整个表单重新初始化。默认情况下，无论您传递给 initialValues使用 与前一个进行比较浅等于 ，即比较引用。

这意味着如果你在渲染中创建了一个新对象，即使它是相同的，当一些状态改变时整个表单会重置，渲染函数重新运行，并为 initialValues 创建一个具有新引用的新对象。 .

解决一般问题，如果你只是想关闭表单重置，我所做的只是移动我的 initialState ，它永远不会改变，输出到一个变量，以便它在每个渲染中都是相同的引用，因此对于具有默认行为的最终形式似乎总是相同的。我更喜欢一种配置来真正完全关闭这种重新初始化行为，但我在文档中找不到。

然而，如果你真的想要这个，但需要修改它，可以使用 initialValuesEqual 配置比较行为。 prop ( docs here )，对 initialValues 做一个深度比较例如对象。

您也可以使用 keepDirtyOnReinitialize prop 只重置表单中没有被触及的部分。

我猜想以上的一些组合可能会解决您的用例，具体取决于您需要的确切 UX。