React Antd Cascader组件地区选择方式

<Form.Item
    label={'地区'}
    name={'region'}
    rules={[
        {
            required: true,
        },
    ]}
>
    <Cascader
        options={regionOptions}
        loadData={loadRegionData}
        changeOnSelect
    />
</Form.Item>

{
    value: 'zhejiang',
    label: 'Zhejiang',
    isLeaf: false
}

const [regionOptions, setRegionOptions] = useState([]);

// 获取初始化的地区
// 这个接口参数为空时会返回地区的一级菜单，不为空时传递pid，返回该pid下面的子菜单
const getRegionList = async params => {
    try {
        const res = await selectCityInfoApi(params)
        const newRes = res.map(item => {
            return {
                ...item,  //返回的值是例如{value: value, label: label, level: 1}
                isLeaf: item.level === '3',  //判断level, 如果是三级菜单就没有子菜单
            }
        })
        if (!params) {
            setRegionOptions(newRes);
        }
        return newRes;
    } catch (error) {
        console.log(error);
    }
}

useEffect(() => {
    if (isAdd === false && editId) {
        // 编辑
    } else {
        // 新增
        getRegionList();   // 接口参数为空时会返回地区的一级菜单
    }
}, [isAdd]);

const loadRegionData = (selectedOptions) => {
    const targetOption = selectedOptions[selectedOptions.length - 1];  // 取选择的最后一个值

    getRegionList({ pid: targetOption.value }).then(res => {  // 用pid去调用接口
        targetOption.children = res;  //  把返回的值放到children中
        setRegionOptions([...regionOptions]);  // 更新regionOptions
    })
}

useEffect(() => {
    if (isAdd === false && editId) {
        // 编辑
        setLoading(true);
        getGroupResourceById(editId)  // 获取当前id的数据
            .then(data => {  // data中有region的id和Pid
                setLoading(false);
                    getRegionList();
                    getRegionDetails(data.regionPid, [String(data.regionPid), String(data.region)]).then((res) => {
                        form.setFieldsValue({ ...data, region: res });
                        buildRegionSelectOptions(res).then(selectRegions => {
                            setRegionOptions(selectRegions);
                        })
                    });
            })
            .catch(err => {
                setLoading(false);
            });
    } else {
        // 新增
        getRegionList();
    }
}, [isAdd]);

const getRegionDetails = async (regionId, regions = []) => {  // 收集region的id
    try {
        const res = await selectCityInfo({ id: regionId })  // 这个接口入参是region的id，返回当前id的具体信息
        if (!!res.length && res[0]?.pid && res[0].pid !== 0) {
            regions.unshift(String(res[0].pid));
        }
        return regions;
    } catch (error) {
        console.error('获取地区列表失败:', error);
        return regions;
    }
};

// 通过一级菜单的pid去递归调用，获取regionOption
const buildRegionSelectOptions = async (regionIds) => {
    const result = [...regionOptions];
    if (!regionIds || regionIds.length === 0) return result;

    const processRegion = async (ids, parentNode = null) => {
        if (!ids || ids.length === 0) return;

        const [currentId, ...restIds] = ids;

        try {
            const regionData = await getRegionList({ pid: currentId });
            const currentNode = regionData.map(item => ({...item, isLeaf: item.level === '3'}));
            parentNode.children = currentNode;

            if (restIds.length > 0) {
                const currentIndex = parentNode.children.findIndex(item => item.value === restIds[0]);
                await processRegion(restIds, parentNode.children[currentIndex]);
            }
        } catch (error) {
            console.error(`获取地区 ${currentId} 失败:`, error);
        }
    };

    let currentRegion = regionOptions.find(item => item.value === regionIds[0]);
    await processRegion(regionIds, currentRegion);
    return result;
};