antd TreeSelect获取父节点的值

在antd对Treeselect组件的渲染中，onChange事件是无法获取父元素的值的，官方解释是处于对性能的考虑，没有对父元素进行关联。

文档末尾也给出了如何获取父元素值的方法，解题思路是：根据treeData的数据结构利用递归回溯去查找父节点的值

忠于文档～

import React from "react";
import { TreeSelect } from "antd";
import { Post } from "../../api/index";

const valueMap = {};
function loops(list, parent) {
  return (list || []).map(({ children, value }) => {
    const node = (valueMap[value] = {
      parent,
      value,
    });
    node.children = loops(children, node);
    return node;
  });
}
// 查找父节点的值
function getPath(value) {
  const path = [];
  let current = valueMap[value];
  while (current) {
    path.unshift(current.value);
    current = current.parent;
  }
  return path;
}

/**
 * 格式化树形机构
 */
function formatTree(
  list = [],
  formatFun,
  childrenName = "children",
  index = 0,
  dep = -1
) {
  return list.map((z, i) => {
    const hasChildren = !!(z[childrenName] || []).length;
    let c = null;
    if (dep === -1 || index < dep) {
      c = hasChildren
        ? formatTree(
            z[childrenName] || [],
            formatFun,
            childrenName,
            index + 1,
            dep
          )
        : null;
      console.log(111, z.name, index < dep, c);
    }
    //c = hasChildren ? formatTree(z[childrenName] || [], formatFun, childrenName, index + 1) : null;
    return {
      ...formatFun(z, i),
      hasChildren,
      level: index,
      children: c,
    };
  });
}

class Test extends React.PureComponent {
  state = {
    districts: "北京",
    districtsList: [],
  };

  componentDidMount() {
    Post("district/treeList").then(res => {
      const districts = res.data[0].name;
      getData.setDistricts(districts); // 保存为全局
      this.setState(
        {
          districtsList: formatTree(
            res.data,
            function (z) {
              return {
                title: z.name,
                value: z.name,
              };
            },
            "childList",
            0,
            1
          ),
          districts: districts,
        },
        () => {
          // 这是我自己其他的业务逻辑 可忽略
          this.update();
          const updateTime = process.env.REACT_APP_SITE_REFRESH_TIME;
          this.timer = setInterval(() => {
            this.update();
          }, +updateTime * 1000);
          // 这才是重点
          loops(this.state.districtsList);
        }
      );
    });
  }

  onChangeArea = value => {
    console.log(getPath(value));
    const new_district = getPath(value).join("-");
    getData.setDistricts(new_district);
    this.setState({
      districts: value,
    });
  };

  render() {
    const { districts, districtsList } = this.state;
    return (
      <TreeSelect
        showSearch
        dropdownMatchSelectWidth={300}
        size="small"
        value={districts}
        treeData={districtsList}
        placeholder="请选择区域"
        treeDefaultExpandAll
        onChange={this.onChangeArea}
      />
    );
  }
}