如何在 React Final Form 之外管理状态？

Question

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

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

问题是，当我的状态改变时，表单会重新渲染并且我总是以无限循环结束，因为：

• FormSpy存储表单中的更改
• 状态变了
• 表单被重新渲染
• FormSpy存储表单中的更改
• 等等...

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

我想要的是：

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

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

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

Answer 1

总是着迷于发现一个我从未考虑过的用例。 从react-final-form@6.1.0 ，您现在可以通过form prop提供您自己的final-form表单实例。 这，如果存储在树中更高的位置——使用useRef() ，可能——会让你保持表单状态更长时间？ 🤔

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

Answer 2

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

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

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以允许设置任何触摸的字段，而不仅仅是那些已经安装/注册的字段。 （例如将其初始化为上次已触及的字段）