Canvas not refreshing completely on state change

[gminero]

I am currently mapping nodes and edges within a network component based on my component State. When my component loads, the canvas seems to be properly rendering the network, however as soon as I change the state, some of the old nodes are preserved and when my state goes abck to its original settings, the items cannot be added because the id's already exists

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)

On componentDidMount, I have an event listener which triggers a method to fetch and parse results (to ultimately create nodes and edges) once my mapping of edges and nodes is complete, I set the state to its 'new state' with updated nodes and edges, in the renderer, I have two variables, one for nodes and anotherfor edges.

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

Renderer

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

is there any reason why some of the edges/nodes from my earleir state are not unrendered from the canvas? and why woudl it be that when my state changes to reflect what was originally in the canvas, the library wont seem to render the nodes and edges because of duplicate id's. Ive additionaly opened a post on stack overflow, maybe ther eis something i'm doing wrong.

[markmelvin]

I'm struggling with the same issue. Did you ever figure out a way around this? I tried removing all edges and nodes use a ref to the underlying network but then it goes blank and never refreshes.

[markmelvin]

OK, I found a workaround. I was clearing the nodes and edges at the wrong time, hence why it was always blank. Clearing it before rendering worked fine. But then I always had the network recreated from scratch every time. In the end I wrote a small function to check which node ids were present in the vis diagram that were not in my data set and removed them with vis.nodes.remove(ids); Works great.