React 前端渲染与状态不同答案

【问题标题】：React front-end renders differently from stateReact 前端渲染与状态不同
【发布时间】：2019-05-31 15:01:28
【问题描述】：

我正在构建一个创建图表的反应应用程序。我为此使用 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);
        });
      }
    }
   }

该函数实现成功找到状态数组的索引，然后将其删除。当我控制台记录新状态时，我得到了我想要的结果。例如，如果我单击从 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 问题，但我不知道如何解决它。

如果您需要任何其他信息，请告知。提前谢谢！

【问题讨论】：

你能提供一个关于codesandbox的例子吗？
一有机会我会的。谢谢
我不明白为什么最后一个示例是错误的，您显示连接 1 到 3 的状态，您的屏幕截图也显示了这一点。顺便说一句，感谢您提供详细的问题
链接是从 3（节点）到 1（连接器）。但是在屏幕截图中，链接位于连接器和 id1 之间。谢谢。

标签： reactjs asynchronous render setstate react-dom

【解决方案1】：

Array::splice 改变了数组，你想返回一个全新的链接数组，并过滤掉删除的链接。

array::splice mdn

我现在正在使用移动通勤，但如果您愿意，我可以提供一个示例来帮助说明。

[Edit] 糟糕，我看到您确实先复制了数组，然后将其存储回数据中，这是对先前状态的引用。尝试将先前的状态（以及数组，因为浅拷贝）传播到一个新的数据对象中，在那里改变数组，然后将状态设置为正常。

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

【讨论】：

我会的。谢谢