Use antd's cascader dynamic load to click two sub-options to display?

I make a component that can dynamically load provincial, city, and county information. Oddly enough, I have to click the parent option twice before the child option is displayed. Click once the sub-option is not displayed, only a blank area is displayed.

//
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;



Mar.16,2022

The

subLocation method returns a promise .

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;
};
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7bc880-2a275.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7bc880-2a275.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?