Ant Design React使用Tree组件时数据自定义更改

import React, { useState, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Tree, Spin } from 'antd';
import { DownOutlined, TagsOutlined } from '@ant-design/icons';
import { getHierarchy } from './service';

const { TreeNode } = Tree;

const getTreeNode = (data) => {
  if (data && data.length > 0) {
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode key={item.key} title={item.title}>
            {getTreeNode(item.children)}
          </TreeNode>
        );
      }
      return (
        <TreeNode
          key={item.key}
          title={item.title}
          switcherIcon={<TagsOutlined />} // TreeNode这个Tree的子组件居然存在SwitcherIcon属性.
        />
      );
    });
  }
  return [];
};

const Hierarchy = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getHierarchy().then((res) => {
      setData(res.data);
      setLoading(false);
    });
  }, []);

  const handleCheck = (checkedKeys, e) => {
    console.log(e);
    console.log(checkedKeys);
  };
  return (
    <PageHeaderWrapper>
      <Card>
        <Spin spinning={loading}>
          <Tree
            // treeData={data}
            showLine
            blockNode
            autoExpandParent
            checkable
            // icon={<DownOutlined />}
            switcherIcon={<DownOutlined />}
            onCheck={handleCheck}
          >
            {getTreeNode(data)}
          </Tree>
        </Spin>
      </Card>
    </PageHeaderWrapper>
  );
};

export default Hierarchy;