---
title: 2.异步加载数据
order: 2

---


##### 通过loadData动态获取数据，isLeaf属性用于标志是否是叶子节点。


```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwCascader } from '@ywfe/yw-design';
const dataSource = [
  {
    value: "2973",
    label: "陕西"
  }
];

class App extends Component {
 constructor(props) {
    super(props);

    this.state = {
      dataSource
    };
    this.onLoadData = this.onLoadData.bind(this);
  }

  handleChange(value, data, extra) {
    console.log(value, data, extra);
  }
 
    onLoadData(data, source) {

        return new Promise(resolve => {
        setTimeout(() => {
            this.setState(
            {
                dataSource: [
                {
                    value: "2973",
                    label: "陕西",
                    children: [
                    {
                        value: "2974",
                        label: "西安",
                        children: [
                        { value: "2975", label: "西安市", isLeaf: true },
                        { value: "2976", label: "高陵县", isLeaf: true }
                        ]
                    },
                    {
                        value: "2980",
                        label: "铜川",
                        children: [
                        { value: "2981", label: "铜川市", isLeaf: true },
                        { value: "2982", label: "宜君县", isLeaf: true }
                        ]
                    }
                    ]
                }
                ]
            },
            resolve
            );
        }, 500);
        });
    }
  render() {
    return (
      <YwCascader
        loadData={this.onLoadData}
        dataSource={this.state.dataSource}
        onChange={this.handleChange}
      />
    );
  }
}

ReactDOM.render(<App />, mountNode);
```