Question

我当前正在根据组件状态映射网络组件内的节点和边缘。当我的组件加载时，画布似乎可以正确渲染网络，但是，一旦我更改状态，就会保留一些旧节点，并且当我的状态恢复到其原始设置时，由于ID为已经存在

错误：无法添加项目：ID为29的项目已存在在o._addItem（vis-network.min.js：4175）在o.add（vis-network.min.js：3889）在t.value（Node.js：147）在Fs（react-dom.production.min.js：5351）在Is（react-dom.production.min.js：5099）在Ps（react-dom.production.min.js：5066）在Ts（react-dom.production.min.js：5001）在ts（react-dom.production.min.js：4927）在Object.enqueueSetState（react-dom.production.min.js：2891）在t.C.setState（react.production.min.js：72）

在componentDidMount上，我有一个事件侦听器，一旦完成边缘和节点的映射，便会触发一种方法来获取和解析结果（最终创建节点和边缘），将状态设置为更新后的“新状态”节点和边缘，在渲染器中，我有两个变量，一个用于节点，另一个用于边缘。

componentDidMount(){
      SomePackage.$$(ContainerDom).on("success", (e, args) => {
          this.getResultNodes(args.results.results).then( value =>{
            this.setState({
                cResultList : value.cResultList,
                nodes: value.nodesArray,
                edges: value.edgeArray
            });
          })
        });
    }

渲染器

render() {
      const nodes = this.state.nodes.map(item => (
        <Node id={item.id} label={item.label} group={item.group}/>
      ))
      const edges = this.state.edges.map(item => (
        <Edge id={item.id} from={item.from} to={item.to}/>
        ))

        return (
              <div className="skill-container">
                <Network className="container" >
                  { nodes }
                  { edges }
                </Network>
              </div>
        );
    }

我本来希望画布重新呈现自身，并清除过去的节点和边缘，但是事实并非如此，这将解释具有重复ID的错误消息。

所以，这可能是库的问题，或者我的方法做得不正确。有人会根据所提供的详细信息知道以上哪个吗？

Answer 1

dargh-经过进一步的故障排除后，最终发现我的状态没有完全重新初始化，因此我清除了它以确保旧值不再存在（我仍然不知道为什么它们最初会一直存在。）

pch = 21

尝试在状态更改时针对网络画布重新渲染时，节点ID重复

1 个答案: