ant design 的树形控件异步数据加载方法

1、在state中定义点击加载时异步加载的数据源treeData 

state = {
    treeData: [],
  }

 2、 在render 的return中Tree组件调用onLoadData方法

render() {
    return (
      <Tree loadData={this.onLoadData}>
        
      </Tree>
    );
  }

定义onLoadData方法 

// 单位树点击父节点异步加载子单位的数据
  onLoadData = (treeNode) => {
   // props 中的数据源 unitTreeData
    const { dispatch, unitTree: { unitTreeData } } = this.props;
   // 调后台接口传递的参数
    const params = {
      // 点击的节点Id 
      parentId: treeNode.props.dataRef.value
    };
    // 发送 action 请求
    // 遍历 unitTreeData 将其 value 属性值赋予 key ,使 key 等于 value
    unitTreeData.forEach( item => {item.key = item.value});
    return new Promise((resolve) => {
      if (treeNode.props.children) {
        resolve();
        return;
      }
      // unitTree为命名空间，fetch 为effects 中的方法
      dispatch({
        type: 'unitTree/fetch',
        payload: params,
     
        // 回调函数，防止请求的数据不同步
        callback: () => {
          const { unitTree: { unitTreeData } } = this.props;
        
          treeNode.props.dataRef.children = unitTreeData;
          // treeData 为数据源
          this.setState({treeData: unitTreeData});
        }
      });
      resolve()
    });
  };

3、处理 数据源

// 处理成树的结构数据
renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} dataRef={item} />;
    });
  }

在 render 中的调用该方法 

// unitData 为数据源
render() {
    return (
      <Tree loadData={this.onLoadData}>
        {this.renderTreeNodes(unitData)}
      </Tree>
    );
  }