正确更改反应组件状态

Question

我正在一个必须显示图形的项目中工作。 为了显示图形，我特别使用vis.js react-vis-network，这是在React中使用其有状态方法使用vis.js的一部分的实现。

在安装组件之前先加载初始节点和边，然后将其作为道具传递给初始状态。

我将两个eventHandler分别附加到vis.js（底层DOM库）和另一个在装饰器（按钮）上。

期望/期望的行为： 通过单击节点或相应的按钮，可以删除该节点。

观察到的行为： 有时，一个节点被删除，有时一个节点消失了几毫秒，然后重新连接，但没有装饰器/按钮。

我已经尝试从空状态开始，并在componentDidMount（）中附加节点和边缘，但是得到了相同的结果。希望您能给我提示。 顺便说一句：我使用附件的方式正确吗？ 对改善我的课堂的其他帮助也受到赞赏

inputChanged(event){
   localstorage.put(event.target.id, event.value)
}

在单击节点2之前

单击节点2之后

更新1

我在stackblitz创建了一个实时示例，该示例由于我所做的且找不到的其他故障而无法使用。

我使用的组件是：

• Network
• Node
• Edge
• 边缘和节点正在扩展Module

我根据 xadm 提到的一些错误对MyNetwork组件进行了重新设计。

•   

  组件（尤其是动态组件）不应以状态存储。

我实现了两个新功能node（）和edges（）//第15-41行*

•   

  也应该使用钥匙道具。

密钥现在已使用//第18 + 32行*

•   

  通过的道具无法修改，您仍然必须复制初始数据
    进入状态。更新/渲染需要状态。

第9行*

*我上面提到的实时示例中的行号

更新2

我重新编写了代码，现在生活样本正在工作。

我希望我可以使用 native vis.js事件，并在MyNetwork或我将要编写的其他组件中使用它们。 我在question中读到有关使用第三方DOM事件的信息，但无法弄清楚它是否适合我的特定情况。因为我不知道如何将事件处理程序附加到。是否可以这样做，以便我可以在其他组件中使用该事件？ 还是我应该针对这个主题打开另一个问题？

Answer 1

听起来就像当您单击按钮时，React正在重新初始化您的组件。也许比我聪明的人可以弄清楚为什么会这样...

但是，由于尚未有人对此发表评论，因此我处理此类问题的一种方法是将状态管理从显示组件中移除。您说要通过父组件的prop传递节点和边。您可能考虑将addNode，removeNode，createEdge和其他方法上移到父组件，以便它保持节点/边缘结构和显示组件{{ 1}}仅显示其收到的道具。

也许这不是您应用程序中的选项，但是我通常使用Redux从所有组件中删除状态管理。我发现这种方法减少了这样的情况：“谁应该拥有国家”并不总是很清楚。

Answer 2

我在这里看到问题的几种可能性。

<Decorator/>应该在<MyNetwork />类之外定义。点击处理程序应作为道具传递。

组件（尤其是动态组件）不应以状态存储。只需以渲染或通过渲染方法（从render调用）来渲染它们。将<Node/>组件与decorator属性一起使用，也应使用key属性。

通过的道具无法修改，您仍然必须将初始数据复制到状态中。更新/渲染需要状态。您可能需要在删除节点时删除edge（-es）。

如果无法解决问题，请创建一个有效的示例（在stackblitz上？）。