重新初始化React子表单以供重用

Question

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

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

当用户在此特定购买的末尾添加商品（也许是第一次将其加载到系统中时，我希望她再次显示购买商品子表单，直到她单击“关闭” “ [🡨]按钮。

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

我可以在其构造函数中初始化该窗体，该窗体仅在第一次使用时有效。目前，我在用户单击“保存” [✔]按钮后清除了数据，这是可行的，但是我对此并不满意，因为这在初始化时有点像“准备”时间，而更多的是“标题”。事情。

我无法在render（）的顶部进行初始化，因为它运行了无数次，所有输入都受到控制，并且疯狂地更改了本地状态。而且，render（）中的setState（）会永远循环。

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

“ getDerivedStateFromProps”在重新使用表单之前清除表单的正确位置，还是有更好的方法？我知道getDerivedStateFromProps也可以运行很多次，因此每当用户单击“保存” [✔]按钮时，我都需要设置一个“ thisFormNeedsToBeInitialized”标志。getDerivedStateFromProps方法的运行次数与render（）一样多，但似乎我可以通过它来设置setState（）了。

Answer 1

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

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