Question

我正在构建一个可创建图形的React应用。我为此使用 react-d3-geaph 。该图从如下状态获取数据：

   data: {
    nodes: [
         { "id": "1", "name": "connector"},
         { "id": "2", "name": "id1"},
         { "id": "3", "name": "node"}
     ],
     links: [
         {"source": "1" , "target": "2"},
         {"source": "3" , "target": "1"}
       ]
   }

呈现的图形如下：

我现在要实现的目标是，当用户单击链接时将其删除。 react-d3-graph提供一种返回点击链接的源和目标的方法。因此，我编写了以下函数来查找和删除正确的链接：

delLink(source, target) {

    var data = {...this.state.data};
    var dataArray = [...data.links];

    for(var i = 0; i < dataArray.length; i++) {
      if(dataArray[i].source === source && dataArray[i].target === target) {
        console.log(i);
        dataArray.splice(i, 1);
        data.links = dataArray;
        this.setState({data: data}, function () {
          console.log(this.state.data);
        });
      }
    }
   }

此功能可以成功找到状态数组的索引，然后将其删除。当我console.log新状态时，我得到了希望的结果。例如，如果我单击从 connector 到 id1 的链接，则这是新状态：

data: {
    nodes: [
         { "id": "1", "name": "connector"},
         { "id": "2", "name": "id1"},
         { "id": "3", "name": "node"}
     ],
     links: [
         {"source": "3" , "target": "1"}
       ]
   }

但是，问题是，尽管该函数正常工作并从 links数组中删除了正确的索引，但该应用会渲染错误的图形，并删除了错误的链接：

经过几次尝试，我意识到无论我单击该应用程序的任何链接，都将从链接数组中删除最后一个链接。最后，如果我通过应用程序保存新图形并刷新它，则这次我得到了正确的图形，其中有 node 和 connector 之间的链接。

我认为这是关于异步功能的React问题，但是我不知道该如何解决。

请告知您是否需要其他信息。预先谢谢你！

Answer 1

Array :: splice对数组进行适当的修改，您希望返回一个全新的链接数组，其中已删除的链接将被滤除。

array::splice mdn

我现在正在进行移动通勤，但是如果您愿意，我可以提供一个示例来说明。

[Edit]糟糕，我看到您确实先复制了数组，但是随后又将其存储回数据中，该数据是对先前状态的引用。尝试将先前的状态（和数组，因为浅表复制）散布到一个新的数据对象中，对该数组进行更改，然后将状态设置为正常。

您能否提供一个代码框示例供我们检查？

React前端渲染与状态有所不同

1 个答案: