对服务器返回的城市数据进行处理

1.服务器返回的数据如下所示:

0: {id: '1', city_name: '上海', city_pre: 'S', city_pinyin: 'Shanghai', city_short: 'sh', …}
1: {id: '2', city_name: '北京', city_pre: 'B', city_pinyin: 'Beijing', city_short: 'bj', …}
2: {id: '3', city_name: '深圳', city_pre: 'S', city_pinyin: 'Shenzhen', city_short: 'sz', …}
3: {id: '4', city_name: '重庆', city_pre: 'C', city_pinyin: 'Chongqing', city_short: 'cq', …}

2.要将数据转换成A:['安庆', '安阳', '鞍山', '阿克苏'],B:['北京', '保定', '滨州', '包头']

  let [citylink, setCitylink] = useState([])//城市列表

useEffect(() => {
    $_citys().then(res => {  //发送请求获取城市数据

      setCitylink(res.data)
      let data = res.data;

      let arr = []
      arr = data.map(v => v.city_pre.toUpperCase())   //对数组的首写字母进行大写转换
      arr = [...new Set(arr)]  // 将字母进行去重
      arr.sort()  //将数组排序

      let abc = []
      for (let obj of arr) {  //将手写大字母变为abc数组里面对象的键名,键值为[]
        abc[obj] = []     //在这里装换成  abc = [A:[],B:[],C:[],D:[]]的格式
      }

      data.forEach((v, i) => {
        let a = v.city_pre.toUpperCase()
        abc[a].push(v.city_name)   //a是和原有的数组中的对象的键名做对比,相同的就把v.city_name  push进当前的键名数组中
      })

      setCitylink(abc)  //最后将城市数组包对象的形式赋给响应式数据中

    })
    console.log(citylink);

  }, [])