Question

我有一个组件，它需要一个SELECT * FROM $table WHERE ((level LIKE '%$searchstring%') OR (message LIKE '%$searchstring%')) AND (datetime >='$startdate') AND (datetime < '$enddate') LIMIT $offset,$limit道具，并且这个平衡道具可以随时间变化。

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

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

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

输入一些东西
等待5秒
看到表单状态再次为空

Answer 1

除了@davnicwil提到的内容外，我的解决方案是useMemo()插入func组件：

const initialValues = useMemo(() => ({ amount: 0, balance }), [])

通过使用useMemo，它在组件有效期内仅创建1个对象，并且随后的重新渲染不会导致initialValues覆盖表单值。

Answer 2

另一种解决方案是使用react-final-form形式道具initialValuesEqual={() => true}

<Form initialValues={{ amount: 0, balance }} initialValuesEqual={() => true} .../>

ref：https://github.com/final-form/react-final-form/issues/246

Answer 3

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

问题出在这里（来自您的密码箱）

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

问题是当initialValues更改时，整个表单将重新初始化。默认情况下，您传递给initialValues的任何内容都会使用浅等于与前一个进行比较，即比较参考。

这意味着，即使您在渲染器中创建一个新对象，即使它相同，当某些状态发生变化时，整个表单也会重置，渲染函数将重新运行，并为{创建一个具有新引用的新对象{1}}。

要解决一般性问题，如果您只想关闭表单重置，我要做的只是将我从未更改过的initialValues移到变量中，以便在每个渲染结果都因此看起来与最终形式相同，但具有默认行为。我希望配置实际上完全关闭这种重新初始化行为，但是我在文档中找不到。

但是，如果您实际上想要此操作，但需要对其进行修改，则可以使用initialState道具（docs here）来配置比较行为，以对initialValuesEqual进行深度比较对象。

您还可以使用initialValues道具来仅重置表单中未被触摸的部分。

我想上述的某种组合可能会解决您的用例，具体取决于您所需的UX。

React-Final-Form：从props设置initialValues，在props更改时重置表单状态

3 个答案: