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

Question

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

I would have expected the canvas to re-render itself and the past nodes and edges to be cleared, however, this does not seem to be the case, which would explain the error message with the duplicate id's.

So, either this is an issue with the library or me not doing something correctly in my approach. would anyone have any idea which of the above it would be based on the provided details?

Answer 1

dargh - after further troubleshooting, finally found out that my state was not completely re-initialzied, so I cleared it to ensure the old values are no longer there (I still dont know why they were persisting in the first place.)

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