1.异步加载

1.主要的原理就是在点击下一级按钮时，onLoad回调调用接口，并把数据放入树treeData中
2.但是第一次点击后，第二次onLoad不加载了，怎么使第二次点击调用onLoad

3.antd 有一个 loadedKeys={[]} 参数，这个参数就是 已经异步加载过的数组，我们只要把这个值让他一直为空数组就可以让

4.在onLoad调用时，将loadedKeys设置为空数组就可以了，这样下一次就还可以调用onLoad.

    const [loadedKeys, setLoadedKeys] = useState([]);
    const [treeExpandedKeys, setTreeExpandedKeys] = useState([]); //展开指定的树节点
    const [treeValue, setTreeValue] = useState([]);
    const [treeData, setTreeData] = useState([]);


     useEffect(async () => {
        let res = await getDictTypeTree({ id: 0 })
        let value = res.result.map((item) => {
            item.id = item.id;
            item.pId = item.parentId;
            item.value = item.id;
            item.title = item.name;
            item.isLeaf = !item.hasChildren
            return item;
        });
        console.log('value', value);
        setTreeData(value)
    }, []);

    function findNode(data, key) {//用于加载后的数据 加入到treeData中
        for (let i = 0; i < data.length; i++) {
            const node = data[i];
            if (node.value === key) {
                return node;
            }
            if (node.children) {
                const found = findNode(node.children, key);
                if (found) {
                    return found;
                }
            }
        }
        return null;
    }
    const loadData = async (data) => {
        try {
            let res = await getDictTypeTree({ id: data.id })
            let value = res.result.map((item) => {
                item.id = item.id;
                item.pId = item.parentId;
                item.value = item.id;
                item.title = item.name;
                item.isLeaf = !item.hasChildren
                return item;
            });

            const newTreeData = [...treeData];
            const targetNode = findNode(newTreeData, data.id);
            if (targetNode) {
                targetNode.children = value;
            }
            console.log('newTreeData', newTreeData);
            setTreeData(newTreeData)
            setLoadedKeys([]);//设置加载的节点为空，下一次就还会加载
        } catch (error) {
            console.error('Error loading data:', error);
        }
    };

     <TreeSelect
                        value={treeValue}
                        onChange={async (newValue, b, c) => {//这个可以不要 
                        //这一个onchange用于搜索之后，选中了，但是下拉框还是展示搜索之后的数据
                            console.log('newValue', newValue, b, c.preValue)
                            // 选择选项后恢复原始数据
                            let res = await getDictTypeTree({ id: 0 })
                            let value1 = res.result.map((item) => {
                                item.id = item.id;
                                item.pId = item.parentId;
                                item.value = item.id;
                                item.title = item.name;
                                item.isLeaf = !item.hasChildren
                                return item;
                            });
                            setTreeData(value1)
                            setTreeValue({ label: b[0], value: newValue })
                        }}
                        showSearch
                        onTreeExpand={(a) => {
                            setTreeExpandedKeys(a)
                            console.log('onTreeExpand1111 ', a,)
                            console.log('onTreeExpand1111treeExpandedKeys ', loadedKeys, treeExpandedKeys)
                        }}
                        // treeExpandAction
                        treeLoadedKeys={loadedKeys}//已经加载过的节点数组
                        loadData={loadData}//点击节点时的异步加载
                        treeExpandedKeys={treeExpandedKeys}//展开的树节点数组
                        filterTreeNode={async (inputValue, treeNode) => {
                            return treeNode.props.title.includes(inputValue);
                        }}//过滤搜索  （看情况可以不要）
                        onSearch={async (value) => {//搜索回调  
                            setTreeExpandedKeys([])//怕数组太多，先设置为空
                            if (value) {
                                let params = {
                                    page: 1,
                                    limit: 1000,
                                    queryPrams: {},
                                };
                                params.queryPrams['name'] = {
                                    opt: 'like',
                                    values: [value],
                                };
                                let res = await searchMapHierarchy(params);
                                let value1 = res.result.records.map((item) => {
                                    item.id = item.id;
                                    item.pId = item.parentId;
                                    item.value = item.id;
                                    item.title = item.name;
                                    item.isLeaf = !item.hasChildren
                                    return item;
                                });
                                console.log('value1', value1)
                                setTreeData(value1)
                            } else {
                                // 清空搜索词时恢复原始数据
                                let res = await getDictTypeTree({ id: 0 })
                                let value1 = res.result.map((item) => {
                                    item.id = item.id;
                                    item.pId = item.parentId;
                                    item.value = item.id;
                                    item.title = item.name;
                                    item.isLeaf = !item.hasChildren
                                    return item;
                                });
                                setTreeData(value1)
                            }
                        }}
                        treeData={treeData}
                        // treeDefaultExpandAll//自动展开所有节点
                        fieldNames={{
                            title: 'name',
                            value: 'id',
                            key: 'id',
                            isLeaf: 'hasChildren'
                        }}
                    />