antdmobile cascader异步加载省市区

Ant Design Mobile 的 Cascader 组件支持异步加载数据，用于省市区级别的动态选择。当用户开始输入时，它会向服务器发送请求获取匹配的省级、市级和区县级的数据，而不是一次性加载所有选项，这有助于提高性能和用户体验。

以下是使用 Ant Design Mobile 的 Async Cascader 实现省市区异步加载的基本步骤：

1. 安装依赖：

   npm install @ant-design-mobile/components@latest

2. 在组件中导入并使用 `AsyncCascader`：

   import { AsyncCascader, List } from '@ant-design mobile';

3. 设置 `options` 属性为初始加载的省市数据，并提供一个函数处理异步加载：

   const provinces = ...; // 初始省份数据
   const citiesAndDistricts = async provinceCode => {
     const response = await fetch(`/api/provinces/${provinceCode}/cities`);
     return response.json().then(cities => Promise.all(
       cities.map(city => ({
         label: city.name,
         value: city.code,
         children: await loadDistricts(city.code)
       }))
     ));
   };

   const loadDistricts = cityCode => {
     // 根据城市码从服务器获取区县数据
   };

   <AsyncCascader
     options={provinces}
     onChange={(value) => console.log('选中', value)}
     onSearch={query => citiesAndDistricts(query)}
   />

4. 当用户输入查询时，`onSearch` 函数会被触发，然后递归地请求下级数据并更新 `options`。