reactjs - How to render the children correct in the react tree component? -

i'm using react tree component called rc-tree. i'm trying dynamic/lazy-load children nodes, have problems.

my github repo here added readme file on steps import data , run application.

first issue: can generate parents (first level of tree), when click on + next parent node, ex 13000000 can generate children nodes parent node , console log them, tree not update children.

when comment out line if (level < 1 || curkey.length - 3 > level * 2) return; can display children follow these steps.. , not direct clicking + sign... 1. clicking plus sign on node 2. clicking minus sign on same node 3. clicking on plus sign again on same node.

it looks item.children undefined, first time click + sign expand, second time click again item.children populated children nodes.

second issue can drill down 1 level, after stops working.

for example 13000000 -> can children (13010000,13020000,13030000,13040000,13050000) -> cant 13010100,13010200 , children (ex 13010101,13010102)

any idea of on how can fix this?

here code:

import react, { component } "react"; import tree, { treenode } "rc-tree"; import axios "axios"; import "rc-tree/assets/index.css";  function generatetreenodes(treenode) {   const arr = [];   const key = treenode.props.eventkey;   // console.log("key", key);   axios     .get(`/api/eclass/${key}`)     .then(response => {       response.data.nodes.map((node, i) => {         return arr.push({ name: node.codedname, key: node.codedname });       });       // console.log("child array", arr);     })     .catch(error => console.log(error));    /*   (let = 0; < 3; i++) {     arr.push({ name: `leaf ${key}-${i}`, key: `${key}-${i}` });   } */   return arr; }  function getnewtreedata(treedata, curkey, child, level) {   console.log("child", child);   const loop = data => {     // if (level < 1 || curkey.length - 3 > level * 2) return;     data.foreach(item => {       // console.log("curkey.indexof(item.key)", curkey.indexof(item.key));       if (curkey.indexof(item.key) === 0) {         console.log("item.children", item.children);         if (item.children) {           loop(item.children);         } else {           item.children = child;         }       }     });   };   loop(treedata);   // setleaf(treedata, curkey, level); }  /* function setleaf(treedata, curkey, level) {   const loopleaf = (data, lev) => {     const l = lev - 1;     data.foreach(item => {       if (         item.key.length > curkey.length           ? item.key.indexof(curkey) !== 0           : curkey.indexof(item.key) !== 0       ) {         return;       }       if (item.children) {         loopleaf(item.children, l);       } else if (l < 1) {         item.isleaf = true;       }     });   };   loopleaf(treedata, level + 1); } */  class rctree extends component {   constructor(props) {     super(props);     this.state = {       treedata: [],       checkedkeys: []     };     this.onselect = this.onselect.bind(this);     this.oncheck = this.oncheck.bind(this);     this.onloaddata = this.onloaddata.bind(this);   }    componentdidmount() {     axios       .get("/api/eclass")       .then(response => {         let treedata = [];         response.data.nodes.map((node, i) => {           return treedata.push({ name: node.codedname, key: node.codedname });         });         // console.log("treedata: " + json.stringify(treedata, null, 2));         this.setstate({ treedata: treedata });         // console.log("state.nodes", json.stringify(this.state, null, 2));       })       .catch(error => console.log(error));   }    /*   componentdidmount() {     settimeout(() => {       this.setstate({         treedata: [           { name: "pnode 01", key: "0-0" },           { name: "pnode 02", key: "0-1" },           { name: "pnode 03", key: "0-2", isleaf: true }         ],         checkedkeys: ["0-0"]       });     }, 100);   } */   onselect(info) {     console.log("selected", info);   }    oncheck(checkedkeys) {     console.log("checkedkeys", checkedkeys);     this.setstate({ checkedkeys });   }   onloaddata(treenode) {     // console.log("treenode", treenode);     return new promise(resolve => {       settimeout(() => {         const treedata = [...this.state.treedata];         // console.log("treenode.props.eventkey,", treenode.props.eventkey);         getnewtreedata(           treedata,           treenode.props.eventkey,           generatetreenodes(treenode),           2         );         this.setstate({ treedata });         resolve();       }, 500);     });   }    render() {     const loop = data => {       console.log("data", data);       return data.map(item => {         if (item.children) {           return (             <treenode title={item.name} key={item.key}>               {loop(item.children)}             </treenode>           );         }         return (           <treenode title={item.name} key={item.key} isleaf={item.isleaf} />         );       });     };     const treenodes = loop(this.state.treedata);     return (       <div>         <h2>dynamic render</h2>         <tree           onselect={this.onselect}           checkable           oncheck={this.oncheck}           checkedkeys={this.state.checkedkeys}           loaddata={this.onloaddata}         >           {treenodes}         </tree>       </div>     );   } }  export default rctree; 

wiki