4

我想将我的 React Final Form 的状态存储在某个地方。现在它在一个 React Hook 中。我目前正在使用useMethods，类似于useState。

我目前拥有的表单是多步骤过程的一部分，当我导航到表单不在的另一个页面时，它会被卸载（当然）。重新安装时，我想为表单提供初始值（可在此处获得）。

问题是，当我的状态改变时，表单会重新渲染，我总是陷入无限循环，因为：

  • FormSpy商店形式的变化
  • 状态变了
  • 表单被重新渲染
  • FormSpy商店形式的变化
  • 等等...

我还有一个问题，当提供初始值时，字段状态未填充（脏、触摸等），因此重新安装时表单看起来很奇怪，因为某些标签与元字段相关联。似乎我们需要某种方式来存储所有表单状态，而不仅仅是包含Form可以卸载和重新安装n次的组件的值。

我想要的是：

  • 更改为立即存储在我的状态
  • 重新渲染以某种方式记住（如果需要，我可以将其存储在我自己的状态中）触摸、脏等状态

我的出发点是查看带去抖动的自动保存（尽管我不需要去抖动，因为我将它存储在本地）。

处理这个问题的最佳方法是什么？

4

2 回答 2

2

总是着迷于发现一个我从未考虑过的用例。由于，您现在可以通过propreact-final-form@6.1.0提供自己的final-form表单实例。如果存储在树中较高的位置（可能带有），这可能会让您保持表单状态更长时间吗？formuseRef()

只是一个猜测。如果有效，请回来报告...

于 2019-07-24T18:10:43.710 回答
0

我刚刚遇到了类似的问题，并且设法创建了一个装饰器来记住触摸（或任何其他字段状态），然后在再次安装该字段时重新应用该状态。一个主要问题是，这会导致闪烁，因为该字段在安装时未触摸，然后通知装饰器，然后该字段被触摸。

一些示例代码（未测试）：

function decorator(form) {
  const storedTouched = {};
  return form.subscribe(({touched}) => {
    for(const field of Object.keys(touched)) {
      if(touched[field]) {
        storedTouched[field] = true;
      }
    }
    for(const field of Object.keys(storedTouched)){
      if(touched[field] === false) { // check against false since unregistered fields are undefined
        form.mutators.setFieldTouched(field, true);
      }
    }
  }, {touched: true});
}

您还可以公开storedTouched以允许设置触摸的任何字段，而不仅仅是那些已经安装/注册的字段。（例如将其初始化为上次已经触及的字段）

于 2020-05-14T01:07:26.310 回答