尝试在状态更改时重新渲染 vis 网络 canvas 时出现重复的节点 ID

Question

我目前正在根据我的组件状态映射网络组件内的节点和边。当我的组件加载时，canvas 似乎正确地渲染了网络，但是一旦我改变状态，一些旧节点就会被保留，当我的状态回到其原始设置时，项目不能添加是因为 ID 已经存在

Error: Cannot add item: item with id 29 already exists at o._addItem (vis-network.min.js:4175) at o.add (vis-network.min.js:3889) at t.value (Node.js:147) at Fs (react-dom.production.min.js:5351) at Is (react-dom.production.min.js:5099) at Ps (react-dom.production.min.js:5066) at Ts (react-dom.production.min.js:5001) at ts (react-dom.production.min.js:4927) at Object.enqueueSetState (react-dom.production.min.js:2891) at t.C.setState (react.production.min.js:72)

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

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>
        );
    }

我原以为 canvas 会重新渲染自己并清除过去的节点和边缘，但是，情况似乎并非如此，这可以用重复项解释错误消息身份证。

所以，这要么是库的问题，要么是我在我的方法中没有做正确的事情。根据提供的详细信息，有人知道上面的哪一项吗？

Answer 1

dargh - 经过进一步的故障排除，终于发现我的状态没有完全重新初始化，所以我清除它以确保旧值不再存在（我仍然不知道为什么他们首先坚持.)

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

尝试在状态更改时重新渲染 vis 网络 canvas 时出现重复的节点 ID

duplicate node id's when attempting to re-render vis network canvas on state change

reactjs

react-vis-network