bkrem / react-d3-tree

:deciduous_tree: React component to create interactive D3 tree graphs
https://bkrem.github.io/react-d3-tree
MIT License
1.09k stars 270 forks source link

TypeError: Cannot set properties of undefined (setting '__rd3t') #438

Open sharpk1 opened 1 year ago

sharpk1 commented 1 year ago

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?

Screen Shot 2023-01-23 at 3 39 44 PM

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 1 year ago

It can happens cause your data is not ready when <Tree /> renders. For example: 1) React renders <Tree /> components 2) Your data for tree is requested, but server do not answer yet, data is not ready 3) Your data variable is passed in <Tree /> component 4) You get this error