Antd tree树结构 数据多情况下 加载慢的 解决办法

通过antd tree 树结构数据异步加载

• 主要是通过后端处理好数据，前端通过没打开一层数据则请求下一层数据，

代码：

import React,{ useState,useEffect } from 'react';
import { Tree } from 'antd';

// 将 后台返回的 数据转换成 tree 所需要的数据
// 这里不需要递归(注释的就是) 因为每次异步加载 点击的时候调用这个函数就可以了
const dealTreeData = (data) => {
    return data.map((it) => {
      return {
        key: it.id,
        id: it.id,
        title: it.name,
       // isLeaf: it.type === '2' ? true : false, // 判断 前面 icon
      };
    });
  };

const updateTreeData = (list, key, children) => {
  return list.map((node) => {
    if (node.key === key) {
      return { ...node, children };
    }
    if (node.children) {
      return { ...node, children: updateTreeData(node.children, key, children) };
    }
    return node;
  });
}

export const TreeNode = () => {
  const [treeData, setTreeData] = useState();
  useEffect(() => {
    // 页面加载请求的数据
    setTreeData(dealTreeData('请求的数据')) // 作为初始数据 页面一开始加载的数据
  }, []);
    
    
  //  异步加载数据
  const onLoadData = ({id,key}) =>
    new Promise((resolve) => {
    const data = '调用接口请求下一层数据'
        // 判断点击的时候有没有 如果连 childrenList 都没有 就直接返回 
     // if (!(arry.childrenList.length)) {
     //  resolve();
     //  return;
     // }
      setTimeout(() => {
        setTreeData((origin) =>
          updateTreeData(origin, key, dealTreeData(data)),
        );
        resolve();
      }, 300);
    });

  return <Tree loadData={onLoadData} treeData={treeData} />;
};