如何在反应树组件中正确呈现子项？

Question

我正在使用名为rc-tree的反应树组件。我试图获得动态/延迟加载子节点，但有一些问题。

我的github回购是here我在导入数据和运行应用程序的步骤中添加了自述文件。

第一期： 我可以生成父级（树的第一级），但是当我单击父节点旁边的+时，ex 13000000我可以生成子节点到其父节点并且控制台记录它们，但树不会更新它的孩子。

当我注释掉这一行if (level < 1 || curKey.length - 3 > level * 2) return;时，我可以按照以下步骤显示孩子...而不是直接点击+号... 1.单击节点上的加号 2.单击同一节点上的减号 3.再次点击同一节点上的加号。

看起来item.children未定义，第一次单击+符号展开，但仅第二次我再次点击item.children时会填充其子节点。

第二期 我也只能向下钻取一个级别，之后它就会停止工作。

例如13000000 - ＆gt;我可以得到孩子们（13010000,13020000,13030000,13040000,13050000） - ＆gt; 但不能得到13010100,13010200及其子女（前13010101,13010102）

关于我如何解决这个问题的想法？

这是我的代码：

import React, { Component } from "react";
import Tree, { TreeNode } from "rc-tree";
import axios from "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));

  /*   for (let i = 0; i < 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;