Updating state causes id already exists error

[silvercondor]

Am I updating the state right?

this.state = {
    exampleGraph:{
        nodes: [],
        edges: []
    }
fetchState(){
    //api call with list of values
    this.setState({exampleGraph:{nodes: api_res.nodes, edges: api_res.edges})
}

Not the exact code but I'm doing something like this.

which gives me the following error

Error: Cannot add item: item with id 1 already exists

Stacktrace shows:

this.setState(
{ 
 exampleGraph: {nodes:node_list, edges: api_res_edges},
}

[anishmprasad]

please share api_res object

[oculardexterity]

I have same issue, I think.

Graph is in react state:

const [graph, setGraph] = useState({
    nodes: [
      { id: 1, label: "Node 1" },
      { id: 2, label: "Node 2" },
      { id: 3, label: "Node 3" },
      { id: 4, label: "Node 4" },
      { id: 5, label: "Node 5" },
    ],
    edges: [
      { from: 1, to: 2},
      { from: 1, to: 3 },
      { from: 2, to: 4 },
      { from: 2, to: 5 },
    ],
  });

But when I call:

   setGraph({
      nodes: [...graph.nodes, { id: "6", label: 'Node 6' }],
      edges: [...graph.edges],
    });

I get the error Uncaught Error: Cannot add item: item with id 6 already exists

I guess this is the same error as #8: the add node function is being called twice for some reason, thus producing error

[danwt]

Same issue here

[leonardorodd]

Same

[j6k4m8]

Hitting the same problem here. For some more diagnostic color, I randomly generated a string in render() and prepend all node IDs with that string; this is calling twice in the same render cycle (i.e. the issue is not calling render twice etc).

[flatplate]

I have the same problem. I have found that supplying a new key every time you update the data works. I update the graph like this:

let [graph, setGraph] = useState({ nodes: [], edges: [], rand: "" });
...
setGraph({
    nodes: nodes,
    edges: edges,
    rand: Math.random().toString(),
});

And I use the Graph element like this:

<Graph
    key={graph.rand}
    ...
/>

Hope this helps until we can find a better solution.