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

Question

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

我当前拥有的表单是多步骤过程的一部分，当我导航到表单不存在的另一个页面时，它会被卸载(当然)。重新安装时，我想为表单提供初始值(可用 here )。

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

• FormSpy 将更改存储在表单中
• 状态已更改
• 表单重新呈现
• FormSpy 将更改存储在表单中
• 等等...

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

我想要什么:

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

我的出发点是查看 Auto-save with Debounce (尽管我不需要去抖，因为我将其存储在本地)。

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

Answer 1

总是着迷于发现我从未考虑过的用例。从 react-final-form@6.1.0 开始，您现在可以提供自己的 final-form 表单实例 via the form prop 。如果将其存储在树中更高的位置(可能使用 useRef())，可能会让您更长时间地维护表单状态？ 🤔

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