ReactJS：未捕获的DOMException：无法在“节点”上执行“ removeChild”：要删除的节点不是该节点的子节点

Question

我正在开发ReactJS应用程序，在其中进行一些条件渲染，并在此基础上在应用程序的页面之一上显示组件。下面是示例代码：

    this.state.editButtonClicked ? (<EditElement>) : (<NonEditElement 
      FY19={this.state.productDetails.FY19}
      FY20={this.state.productDetails.FY20}
      FY21={this.state.productDetails.FY21}
      FY22={this.state.productDetails.FY22}
      FY23={this.state.productDetails.FY23}
 >)}

默认情况下，属性editButtonClicked的值为false并相应地显示NonEditElement组件，但是当我单击某个按钮时，editButtonClicked属性的值变为true在那段时间内，我遇到了以下错误：

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

当我注释掉或删除<NonEditElement />组件并将其替换为<></>时，一切都按预期工作，这确实很奇怪。

我真的不确定为什么会这样，因为我之前已经开发了一些ReactJS应用程序，而且我做过类似的事情，而且以前从未遇到过任何此类问题。我检查了其他类似问题，例如this和this，这些问题已在StackOverflow上问过，但没有一个对我的情况有帮助。 如果有人可以向我提供有关我为什么会遇到此问题的指导，那将是非常不错的事情。

任何帮助将不胜感激。谢谢！