asb_cloud_front/src/components/WellTreeSelector.jsx

import { useState, useEffect } from 'react'
import { WellService } from '../services/api'
import Loader from '../components/Loader'
import { TreeSelect } from 'antd' // TreeSelect 
import { useHistory } from 'react-router-dom'

const groupBy = (table, ...keys) => {
    let key = keys[0]
  
    let groups = table.reduce((rv, item) => {
      let keyValue = item[key]
      let group = rv.find(o=>o.title === keyValue)
      if(!group)
      {
        group = {
          title: keyValue, 
          value: keys.length === 1 ? item : `${key} ${keyValue} ${item['id']}`,
          selectable: keys.length === 1,
          children:[]}
        rv.push(group)
      }
      if(keys.length > 1)
        group.children.push(item);
      return rv;
    }, []);
  
    if(keys.length > 1){
      for(let group of groups){
        group.children = groupBy(group.children, ...keys.slice(1))
      }
    }
  
    return groups
  };

export default function WellTreeSelector(props){
    const [wells, setWells] = useState([])
    const [wellsTree, setWellsTree] = useState([]) // wellsTree,
    const [loader, setLoader] = useState(false)
    const history = useHistory()

    let updateWellsList = async () => {
        setLoader(true)
        try{
          let newWells = (await WellService.getWells()).map(w =>{return {key:w.id, ...w}})
          let wellsTree = groupBy(newWells, 'deposit', 'cluster', 'caption')
          console.log(wellsTree)
          setWells( newWells )
          setWellsTree(wellsTree)
        }
        catch(e){
          console.error(`${e.message}`);
        }
        setLoader(false)
      }
    
      useEffect(()=>{updateWellsList()}, [])
    
      const onChange = (value) =>{
        ;
      }

      return(
          <>
          <TreeSelect  /* не работает пока */      
          style={{ width: '25%',
                    alignItems: 'center' }}
          placeholder="Выберите месторождение"
          treeData={wellsTree}
          treeDefaultExpandAll
          onChange={onChange}
        />
      {loader&&<Loader/>}
        </>
      )
}