antd tree异步加载合并tree

异步加载tree 这时有部门树与员工树，在部门下面有员工与部门，在后端不处理数据的情况下需要我们手动去处理数据，下面做一个简单的演示

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

interface DataNode {
  title: string;
  key: string;
  isLeaf?: boolean;
  children?: DataNode[];
}

// 这个方法是用给父节点来挂载children的
const updateTreeData = (list: DataNode[], key: React.Key, children: DataNode[]): DataNode[] =>
  list.map((node) => {
    if (node.key === key) {
      return {
        ...node,
        children,
      };
    }
    if (node.children) {
      return {
        ...node,
        children: updateTreeData(node.children, key, children),
      };
    }
    return node;
  });

const App: React.FC = () => {
  const [treeData, setTreeData] = useState([]);

  const onLoadData = ({ key, children }: any) => 
    
  new Promise<void>((resolve) => {
   	  let result = []
      // 假设这是一个接口
      getUsertree(key).then(res => result.push(...res.data))
      getDepartment(key).then((res) => result.push(...res.data))
      // 原数据， key， 要更新的 children 
      settreeData(updateTreeData(treeData, key, result))
        resolve();
      }, 1000);
    });

	// 假设这里初始拿到数据	
  useEffect(() => {
  		getInitTree().then(res => setTreeData(res.data))
  },[]) 
  return <Tree loadData={onLoadData} treeData={treeData} />;
};

export default App;

因为有时候一个部门下有员工的同时，又有部门，所以需要部门与员工的数据，进行合并然后再交给