使用antd的cascader动态加载点击两下子选项才显示？

Question

我做一个组件能够动态加载省、市、县地区信息，比较奇怪的是我必须点击父选项两次，子选项才显示。点击一次的话子选项不显示，只显示一片空白区域。

//获取子地区
subLocation = (parentId) => {
    let places = [];
    axios.get("/subLocation/" + parentId).then(response => {
        if (response.status === 200 && response.data !== '') {
            response.data.forEach((item) => {
                let tem = {};
                tem.value = item.value + '';
                tem.label = item.label;
                tem.isLeaf = item.isleaf;
                places.push(tem);
            })
        }
    }).catch(error => {
        console.error(error)
    });
    return places;
};

//获取省份
province = () => {
    let province = [];
    axios.get("/province").then(response => {
        if (response.status === 200 && response.data !== '') {
            response.data.forEach((item) => {
                let tem = {};
                tem.value = item.value + '';
                tem.label = item.label;
                tem.isLeaf = item.isleaf;
                province.push(tem);
            })
        }
    }).catch(error => {
        console.error(error)
    });
    return province;
}

//组件定义
import {Cascader} from 'antd';
import React from 'react'
import Options from './Data'
const province = Options.province();
class Location extends React.Component {
    loadData = (selectedOptions) => {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        let subLocation = Options.subLocation(targetOption.value);
        targetOption.children = subLocation;
        this.setState({
            locations: [...this.state.locations]
        });
    };

    constructor(props) {
        super(props);
        this.state = {
            locations: province
        };
    }

    render() {
        return (
            <Cascader
                options={this.state.locations}
                loadData={this.loadData}
            />
        );
    }
}
export default Location;

Answer 1

subLocation方法返回一个promise。

Options.subLocation(targetOption.value).then(data => {
    targetOption.children = data; 
    this.setState({
            locations: [...this.state.locations]
        });
})

---

补充：
加上这个属性试试？

<Cascader
    changeOnSelect
    options={this.state.locations}
    loadData={this.loadData}
/>

Answer 2

因为你的请求是异步的，还没返回回来你得到的就是一个空数组，所以是空白的，你点击第二次的时候第一次请求的数据已经回来了，然后setState页面重新渲染，所以第二次点击就有数据了，把数据请求改成async await来解决

subLocation = async (parentId) => {
    let places = [];
    let response = await axios.get("/subLocation/" + parentId);
    if (response.status === 200 && response.data !== '') {
        response.data.forEach((item) => {
            let tem = {};
            tem.value = item.value + '';
            tem.label = item.label;
            tem.isLeaf = item.isleaf;
            places.push(tem);
        })
    }
    return places;
};