TypeError: Cannot set properties of undefined (setting '__rd3t')
sharpk1 opened this issue · 1 comments
sharpk1 commented
Hello all! I am trying to get the tree to render some data that comes from a parent component. I am able to render it correctly when I use test data that is super simple and then change the code live to my tree data. I am using a ternary to handle when the data is coming in and still no luck. My component is like so:
import React from "react";
import Tree from "react-d3-tree";
// This is a simplified example of an org chart with a depth of 2.
// Note how deeper levels are defined recursively via the `children` property.
const orgChart = {
name: "Route 4",
children: [
{
name: "O=C(Cn1nnc2ccccc21)NCc1ccsc1",
children: [
{
name: "NCc1ccsc1",
},
{
name: "COC(=O)Cn1nnc2ccccc21",
},
],
},
{
name: "O=C(Cn1nnc2ccccc21)N(Cc1ccsc1)c1ccc(Cl)cc1",
children: [
{
name: "Clc1ccc(I)cc1",
},
{
name: "O=C(Cn1nnc2ccccc21)NCc1ccsc1",
},
],
},
],
};
const TreeStructure = (props) => {
const { treeData } = props;
console.log(treeData[10]);
return (
<div>
{treeData ? (
<Tree
data={treeData[10]} // I change this to orgChart and it loads fine, if I change it to treeData[10] and then it loads fine but if I REFRESH, it'll throw that error
shouldCollapseNeighborNodes={false}
// onClick={(nodeObj) => this.handleClick(nodeObj, true)}
/>
) : (
<h1>Loading</h1>
)}
</div>
);
};
export default TreeStructure;
Here is what treeData[10]
spits out
{
"name": "O=C(Cn1nnc2ccccc21)N(Cc1ccsc1)c1ccc(Cl)cc1",
"children": [
{
"name": "O=C(CCl)N(Cc1ccsc1)c1ccc(Cl)cc1",
"children": [
{
"name": "O=C(O)CCl",
"children": []
},
{
"name": "Clc1ccc(NCc2ccsc2)cc1",
"children": []
}
]
},
{
"name": "c1ccc2[nH]nnc2c1",
"children": []
}
]
}
Feel free to delete any questions that do not apply.
Are you reporting a bug, or opening a feature request?
Bug
What is the actual behavior/output?
What is the behavior/output you expect?
Expecting the tree to render, it works when I render simple test data then go in the code and change it to my dynamic data
Can you consistently reproduce the issue/create a reproduction case (e.g. on https://codesandbox.io)?
I cannot
What version of react-d3-tree are you using?
3.5.0
If react-d3-tree crashed with a traceback, please paste the full traceback below.
See the screenshot, not sure what to capture that.
RenatRysaev commented
It can happens cause your data is not ready when <Tree />
renders.
For example:
- React renders
<Tree />
components - Your data for tree is requested, but server do not answer yet, data is not ready
- Your
data
variable is passed in<Tree />
component - You get this error