重新初始化一个反应子表单以供重用

Question

这显然是我不知道该怎么做的事情......这是概念性的。
我的用例是包含标题数据和详细数据的购买（或发票等）的输入表单。
我的用户会看到购买清单，每次购买一行。
她单击一个并查看其详细项目，原来的单行展开以显示项目行，任意数量。
最后一个下方有一个“添加项目”[＋]按钮。

点击[＋]按钮后，“新项目”表单会显示在当前项目下方。
用户填写子表单并单击“保存”[✔] 按钮（仅在项目确定后才启用）。
表单中的数据现在显示在一行中，作为购买的最后一项。到目前为止，没有什么新鲜事，没有什么可抱怨的。

由于用户在此特定购买结束时添加项目（可能是第一次将其加载到系统中），我希望她一次又一次地看到购买项目子表单，直到她单击“关闭” [??????] 按钮。

经过几天的尝试和阅读，这是我找不到的方法。
例如，表格第二次再次显示与之前相同的数据内容，这是不可接受的（因为它会错误地助长数据重复）。我需要清除状态。

我可以在它的构造函数中初始化表单，它只适用于第一次使用。
目前我在用户单击“保存”[✔]按钮后清除数据，这有效，但我对此不满意，因为这是一个“立足点”时间，而初始化更像是一个“标题”事物。

我无法在 render() 的顶部进行初始化，因为它运行了无数次，所有输入都受到控制并疯狂地改变本地状态。
此外，render() 中的 setState() 将永远循环。

我将尝试使用 getDerivedStateFromProps，但官方的 React 文献试图阻止我。

“getDerivedStateFromProps”是在重用表单之前清除表单的正确位置，还是有更好的方法？
我知道 getDerivedStateFromProps 也会运行很多次，所以每当用户点击“保存”[✔] 按钮时，我都需要设置一个“thisFormNeedsToBeInitialized”标志。
getDerivedStateFromProps 方法运行的次数与 render() 一样多次，但似乎我可以从中设置 setState()。

Answer 1

阅读有关我的问题主题的更多信息后，我发现@bvaughn 的一篇文章解释了如何做我想做的事。
这是an article about "derived state"。
简而言之，如果我给重复表单的每个连续实例一个不同的key，那么 React 会在重新渲染时破坏前一个实例，所以我可以在构造函数中初始化每个新实例（这是一个“标题”时间情况。

我还没有尝试过，但我很确定这是一个很好的解决方案。
特别是，比我计划使用getDerivedStateFromProps 的解决方案更清洁。