react的antd4treeselect 过滤出只和搜索有关的内容

 * @Description: 组件为antd4的treeselect title包含orgCode和orgName，每次搜索都重新去更新这棵树
 * 核心方法是loop 过滤搜索不存在的项
 * @Author: 李思甜
 * @Date: 2024-01-18 14:30:48
 * @LastEditTime: 2024-01-18 15:46:51
 * @LastEditors: 李思甜
 */
import React, { useState } from "react";
import {TreeSelect} from 'antd'

export const MyTreeSelect=props=>{
const [tree,setTree]=useState([])
  const loop=(data,searchValue)=>{
    return data.map(item=>{
      let title=item.title
      const flag=item.title.indexOf(searchValue)>-1 || item.orgCode==searchValue
      if(item.children && item.children.length>0){
        const children=loop(item.children,searchValue)
        return {
          ...item,
          title:flag||children.length?title:null,
          children:children.length?children:undefined
        }
      }
      return {
        ...item,
        title:flag?title:null
      }
    }).filter(item=>!!item.title)
  }
const onSearch=(value)=>{
  if(!value){
    setTree(initialTree)
    return 
  }
  const res=loop(initialTree,value)
  setTree(res)
}
return (
  <TreeSelect
    showSearch
    treeNodeFilterProp="title"
    onSearch={onSearch}
    treeData={tree}
  />
)




}