Open jrraymond opened 3 years ago
Check out this issue #92. In my case, It works. I hope this will help you.
@jrraymond were you able to resolve this issue?
It happens to me every time on Reacts DOM update sequence. @crubier Can this get some attention?
I think it's problem is caused by unnecessary re-rendering, which creates a new component with the same key as the previous one.
This problem can be solved by differentiating components like
The Math.random() method will play the animation every time it is re-rendered. The React.memo() method also re-renders the nodes when you add props to the Graph component itself, so the animation plays. I don't like this behavior very much. umm...
I put what I've seen about where this problem is coming from on https://github.com/crubier/react-graph-vis/issues/92#issuecomment-818279270 Having to set keys to force re-creating the component isn't an ideal solution, and it'd be good for this to be StrictMode compatible.
I think it's problem is caused by unnecessary re-rendering, which creates a new component with the same key as the previous one. This problem can be solved by differentiating components like or memoizing components by wrap them like React.memo().
The Math.random() method will play the animation every time it is re-rendered. The React.memo() method also re-renders the nodes when you add props to the Graph component itself, so the animation plays. I don't like this behavior very much. umm...
This solution work for me, thanks @ivgtr
I also encountered this problem in React 18, and I had been solved by remove <React.StrictMode></React.StrictMode>
in index.js.
Late to the party, but just do this instead:
const [graph, setGraph] = useState({
nodes: [
{ id: 1, label: 'Node 1', title: 'node 1 tootip text' },
{ id: 2, label: 'Node 2', title: 'node 2 tootip text' },
{ id: 3, label: 'Node 3', title: 'node 3 tootip text' },
{ id: 4, label: 'Node 4', title: 'node 4 tootip text' },
{ id: 5, label: 'Node 5', title: 'node 5 tootip text' },
],
edges: [
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
],
});
I also encountered this problem in React 18, and I had been solved by remove
<React.StrictMode></React.StrictMode>
in index.js.
Worked for me :)
Removing React's Strict mode isnt a good choice
Thanks @Davste93 for your proposed workaround, worked for me. Making what should be a props a state for this precise use case helped me get rid of the A duplicate id was found in the parameter array.
.
I find it weird that my calling component needs to create a state variable for the graph data before passing it to the graph
attribute of the ReactGraph
component, but it was the only way to got it working for me.
Removing StrictMode
not being a viable option as its useful to find bugs (like this one), see react doc https://react.dev/reference/react/StrictMode
Thank you for this project!
I tried to recreate the example from the readme with some very minor modifications (no explicit call to
ReactDOM
). The example renders correctly but fails when the component re-renders with the following error:I'm using the following versions: