react使用antd级联实现省市区选择

import { Component } from 'react';
import { Cascader } from 'antd';

import * as addressRequest from '../../services/address';

export default class AreaPicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [],
      defaultValue: this.props.value
    };
  }

  componentDidMount() {
    if (this.state.defaultValue.length>0) {
      /**有默认值时获取所有列表*/
      this.getAllOpt();
    } else {
      this.getProvinceOpt();
    }
  }
  render() {
    return (
      
    );
  }

  onChange = (value, selectedOptions) => {
        /**给父组件通知值变化*/
		this.props.onChange(value);
  };

  loadData = selectedOptions => {
    let targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;
    /**获取市列表 */
    if (selectedOptions.length == 1) {
      addressRequest.getCityList(targetOption.value).then(res => {
        targetOption.loading = false;
        let list = [];
        res.forEach(el =>
          list.push({
            label: el.value,
            value: el.code,
            isLeaf: false
          })
        );
        targetOption.children = list;
        this.setState({
          options: [...this.state.options]
        });
      });
    } else {
      /**获取区列表 */
      addressRequest.getRegionList(targetOption.value).then(res => {
        targetOption.loading = false;
        let list = [];
        res.forEach(el =>
          list.push({
            label: el.value,
            value: el.code
          })
        );
        targetOption.children = list;
        this.setState({
          options: [...this.state.options]
        });
      });
    }
  };

  /**没有默认值时初始化省列表 */
  getProvinceOpt() {
    addressRequest.getProvinceList('0').then(res => {
      let list = [];
      res.forEach(el => {
        list.push({
          label: el.value,
          value: el.code,
          isLeaf: false
        });
      });
      this.setState({
        options: list
      });
    });
  }

	/**有默认选中的值时对数据进行初始化  */
  getAllOpt() {
    let list1 = [],
      list2 = [],
      list3 = [];
    /**区获取 */
    addressRequest.getRegionList(this.state.defaultValue[1]).then(res => {
      res.forEach(el =>
        list3.push({
          label: el.value,
          value: el.code
        })
      );
      /**市获取 */
      addressRequest.getCityList(this.state.defaultValue[0]).then(res => {
        res.forEach(el =>
          list2.push({
            label: el.value,
            value: el.code,
            isLeaf: false,
            children: this.state.defaultValue[1] == el.code ? list3 : null
          })
        );
        /**省获取 */
        addressRequest.getProvinceList('0').then(res => {
          res.forEach(el => {
            list1.push({
              label: el.value,
              value: el.code,
              isLeaf: false,
              children: this.state.defaultValue[0] == el.code ? list2 : null
            });
          });
          this.setState({
            options: list1
          });
        });
      });
    });
  }
}