Antd treeselect gets the value of the parent node

stay antd Yes Treeselect Rendering of components ,onChange Events cannot get the value of the parent element , The official explanation is for performance , The parent element is not associated .

The end of the document also shows how to get the value of the parent element , The solution is ： according to treeData The data structure uses recursive backtracking to find the value of the parent node

Be loyal to the document ～

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;
  });
}
//  Find the value of the parent node 
function getPath(value) {
    
  const path = [];
  let current = valueMap[value];
  while (current) {
    
    path.unshift(current.value);
    current = current.parent;
  }
  return path;
}

/** *  Format tree structure  */
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: " Beijing ",
    districtsList:[],
  };
 
 componentDidMount() {
    
  Post("district/treeList").then((res) => {
    
      const districts = res.data[0].name;
      getData.setDistricts(districts); //  Save as global 
      this.setState(
        {
    
          districtsList: formatTree(
            res.data,
            function (z) {
    
              return {
    
                title: z.name,
                value: z.name,
              };
            },
            "childList",
            0,
            1
          ),
          districts: districts,
        },
        () => {
    
        //  This is my other business logic   Negligible 
          this.update();
          const updateTime = process.env.REACT_APP_SITE_REFRESH_TIME;
          this.timer = setInterval(() => {
    
            this.update();
          }, +updateTime * 1000);
          //  That's the point 
          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=" Please select the area "
          treeDefaultExpandAll
          onChange={
    this.onChangeArea}
       />
    );
  }
}