这是我参与8月更文挑战的第9天，活动详情查看： 8月更文挑战

在我们在使用ant design 的ui库的时候，会有用到树形控件的需求，因此需要加载相应的树形数据，下面讲述一下异步数据加载的方式方法。

1、首先，需要在state中定义点击加载时异步加载的数据源treeData ，初始化值为一个空的数组。

state = {
    treeData: [],
 2、 然后下来需要在render 的return中引入Tree组件，并顶一个loadData属性，然后赋值this.onLoadData的方法。
render() {
    return (
      <Tree loadData={this.onLoadData}>
      </Tree>
然后我们定义一下onLoadData方法， 该方法为单位树点击父节点异步加载子单位的数据，传入的参数treeNode为数的节点，从rops 中的数据源 unitTreeData结构出树的数据。
const { dispatch, unitTree: { unitTreeData } } = this.props;然后发送 action 请求，遍历 unitTreeData 将其 value 属性值赋予 key ,使 key 等于 value；最后将拿到的treeData 数据源通过this.setState方法进行赋值操作，
this.setState({treeData: unitTreeData});
// 单位树点击父节点异步加载子单位的数据
  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的方法，对数据进行map，然后根据是否存在父节点进行递归操作。
// 处理成树的结构数据
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>
复制代码