基于Ant Design Mobile封装地址编辑，选择

Ant Design Mobile地址编辑

基于antd-mobile PickerView组件和vant/area-data地址信息封装收货地址信息
(主要是因为Ant Design Mobile没有可以直接拿来用的选择地址组件)
areaList地址信息

import { areaList } from '@vant/area-data' 
import { PickerView } from 'antd-mobile'
import React, { useState, useEffect } from 'react'
export default function Address() {
  const { province_list, city_list, county_list } = areaList
  const [provinceList, setProvinceList] = useState([]) //省份
  const [cityList, setCityList] = useState([]) // 市区
  const [countyList, setCountyList] = useState([]) // 县区
  const [value, setValue] = useState(['000000', '', ''])
  // 把areaList里对象处理成需要的数组
  const editColumns = (list) => {
    let mainList = Object.entries(list).map((item) => {
      return {
        label: item[1],
        value: item[0]
      }
    })
    mainList.unshift({
      label: '请选择',
      value: '000000'
    })
    return mainList
  }
  useEffect(() => {
    // 初始化省份信息
    let provinceList = editColumns(province_list)
    setProvinceList(provinceList)
  }, [])
  useEffect(() => {
    // 通过省份变化，设置市区
    if (value[0] && value[0] !== '000000') {
      // 使用正则过滤市区
      let pattern = new RegExp(`^${value[0].slice(0, 2)}`)
      let cityList = JSON.parse(JSON.stringify(city_list))
      for (let key in cityList) {
        if (!pattern.test(key)) {
          delete cityList[key]
        }
      }
      cityList = editColumns(cityList)
      setCityList(cityList)
    } else {
      setCityList([])
      setCountyList([])
    }
    // 通过市区变化，设置县区
    if (value[1] && value[1] !== '000000') {
      // 使用正则过滤县区
      let pattern = new RegExp(`^${value[1].slice(0, 4)}`)
      let countyList = JSON.parse(JSON.stringify(county_list))
      for (let key in countyList) {
        if (!pattern.test(key)) {
          delete countyList[key]
        }
      }
      countyList = editColumns(countyList)
      setCountyList(countyList)
    } else {
      setCountyList([])
    }
  }, [value])
  return (
    <PickerView
      columns={[provinceList, cityList, countyList]}
      value={value}
      onChange={(val, extend) => {
        setValue(val)
        console.log('onChange', val, extend.items)
      }}
    />
  )
}

效果图

上述代码只是基础功能，想要应用到项目中就需要在修改一下，地址信息都在extend.items里面