快捷導(dǎo)航

React Antd Cascader組件地區(qū)選擇方式

更新時(shí)間：2025年08月30日 11:56:09 作者：水果攤見

文章介紹了在表單中實(shí)現(xiàn)地區(qū)選擇功能,使用Cascader組件動(dòng)態(tài)加載數(shù)據(jù),需通過loadData和遞歸處理實(shí)現(xiàn)增刪改查,存儲(chǔ)和回顯需完整id數(shù)組以支持多級(jí)地區(qū)展示,強(qiáng)調(diào)后端設(shè)計(jì)對(duì)數(shù)據(jù)關(guān)聯(lián)（id/pid）的重要性

前言

表單中添加一個(gè)地區(qū)選擇功能，要求支持增刪改查功能。

Cascader

使用Cascader組件動(dòng)態(tài)加載地區(qū)選項(xiàng)。使用 loadData 實(shí)現(xiàn)動(dòng)態(tài)加載選項(xiàng)，（loadData 與 showSearch 無法一起使用）。

這里使用了Form.Item組件。

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

這里的options在每次選擇后，通過loadData加載新的選項(xiàng)。
Cascader組件的選項(xiàng)每次存儲(chǔ)的值為option中的value，展示的值為label，并通過isLeaf判斷是否有子菜單

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

新增

點(diǎn)擊新增按鈕時(shí)，會(huì)獲取地區(qū)接口，并根據(jù)用戶選擇加載地區(qū)。

地區(qū)在數(shù)據(jù)庫中是根據(jù)id和pid進(jìn)行關(guān)聯(lián)的。如果pid是0，代表是1級(jí)地區(qū)；pid是1，代表當(dāng)前地區(qū)是id為1的地區(qū)的子地區(qū)；同理，pid是2，代表當(dāng)前地區(qū)是id為2的地區(qū)的子地區(qū)。

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

// 獲取初始化的地區(qū)
// 這個(gè)接口參數(shù)為空時(shí)會(huì)返回地區(qū)的一級(jí)菜單，不為空時(shí)傳遞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',  //判斷l(xiāng)evel, 如果是三級(jí)菜單就沒有子菜單
            }
        })
        if (!params) {
            setRegionOptions(newRes);
        }
        return newRes;
    } catch (error) {
        console.log(error);
    }
}

useEffect(() => {
    if (isAdd === false && editId) {
        // 編輯
    } else {
        // 新增
        getRegionList();   // 接口參數(shù)為空時(shí)會(huì)返回地區(qū)的一級(jí)菜單
    }
}, [isAdd]);

const loadRegionData = (selectedOptions) => {
    const targetOption = selectedOptions[selectedOptions.length - 1];  // 取選擇的最后一個(gè)值

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

回顯

表單保存之后，存儲(chǔ)的值是選擇的地區(qū)的id，這就有一個(gè)問題，回顯時(shí)拿到的也是這個(gè)id。

例如如果選擇：[北京、北京、東城區(qū)]，那么存儲(chǔ)的時(shí)候只會(huì)存東城的id:3，但是回顯需要他們的id：[1, 2, 3] 才能回顯地區(qū)，并且在用戶點(diǎn)擊時(shí)展開時(shí)還需要相關(guān)的option數(shù)據(jù)。

useEffect(() => {
    if (isAdd === false && editId) {
        // 編輯
        setLoading(true);
        getGroupResourceById(editId)  // 獲取當(dāng)前id的數(shù)據(jù)
            .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 })  // 這個(gè)接口入?yún)⑹莚egion的id，返回當(dāng)前id的具體信息
        if (!!res.length && res[0]?.pid && res[0].pid !== 0) {
            regions.unshift(String(res[0].pid));
        }
        return regions;
    } catch (error) {
        console.error('獲取地區(qū)列表失敗:', error);
        return regions;
    }
};

// 通過一級(jí)菜單的pid去遞歸調(diào)用，獲取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(`獲取地區(qū) ${currentId} 失敗:`, error);
        }
    };

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