antd react tree 异步数据加载 加载中的加载状态icon没有了？

一、先讲一下需求

这是一个大屏的需求 tree

需要根据节点级别，展示不同的自定义icon

由于tree生产数据比较庞大，在设计的时候就要求异步加载数据，避免性能过差

二、分析问题

可能是我第一次做tree异步加载 不清楚是什么控制loading状态显隐

可能是因为对promise了解不够清晰明了透彻

也可能是我当时cv马虎了

反正我是迷惑的，不清楚为啥

遇到问题就解决问题，没有问题就创造问题解决问题喽！

1、起先以为是showIcon将loading状态覆盖了
我将本地代码onLoadData treeData showIcon 换成antd官网中的示例重新写了一遍，发现loading状态是正常显示的

2、由于treeData 是初始化数据 不涉及loading状态

3、我就开始对onLoadData方法，进行检查

<Tree loadData={onLoadData} treeData={treeData} showIcon />

三、检查代码

1、我的代码如下

const onLoadData = ({ key, children }: any) => {
    return new Promise<void>((resolve) => {
      if (children) {
        resolve();
        return;
      }
      接口().then((res: any) => {
        setTreeData(res)
      })
      resolve()
    })
  }

2、官网代码如下

const onLoadData = ({ key, children }: any) =>
    new Promise<void>((resolve) => {
      if (children) {
        resolve();
        return;
      }
      setTimeout(() => {
        setTreeData((origin) =>
          updateTreeData(origin, key, [
            { title: 'Child Node', key: `${key}-0` },
            { title: 'Child Node', key: `${key}-1` },
          ]),
        );

        resolve();
      }, 1000);
    });

3、一时间我竟然没有看出区别，不过还是被我的卡姿兰大眼睛发现了，修改代码如下：

const onLoadData = ({ key, children }: any) => {
    return new Promise<void>((resolve) => {
      if (children) {
        resolve();
        return;
      }
      接口().then((res: any) => {
        setTreeData(res)
        resolve()
      })
    })
  }

四、问题总结

1、tree 的 loading状态时受控于 函数loadData的 loadData 返回Promise对象
2、我的resolve函数v错了位置 ,promise 中resolve函数将Promise对象的状态从"未完成"变成了"成功", 我还没有等接口数据返回就直接结束了tree的loading状态，自然我的loading就没有喽

五、俺有话要say

一般人遇不到我这样的问题 可是万一有人遇到呢 是吧 对吧 嗯吧 哈哈哈哈
以上就是我遇到的问题啦~
祝大家购票成功 抢票成功 假期也很成功