react，城市列表模块，运用hook和Promise.all，成功获取数据库数据后，如何让各城市名称显示在相应位置上？

Question

在使用的react版本：

已写的代码：

import React, { useEffect, useState } from 'react';
import { IndexBar, List } from 'antd-mobile';
import axios from 'axios';
import NavHeader from '../../components/NavHeader';
import { getCurrentCity } from '../../utils'
import './style.css';

function MyCityList() {
  const charCodeOfA = 'A'.charCodeAt(0);
  const [groups, setGroups] = useState(Array(26)
    .fill('')
    .map((_, i) => ({
    title: String.fromCharCode(charCodeOfA + i),
    items: []
  })))

useEffect(()=>{
  // 城市列表
  let cityList = []

  // 热门城市列表
  let cityListHot = {
    title: "热门城市",
    items: [],
    // key: "hot"
  }
  
  // 当前定位城市
  let curCityList = {
    title: "当前城市",
    items: [],
    // key: "cur"
  }
  
  // 城市列表数据函数
  function HandleCityList(res){
    let cityList = res.data.body
    groups.map((item)=>{
      cityList.map((city)=>{
        if(city.pinyin.slice(0,1).toUpperCase()==item.title){
          item.items.push(city)
        }
      })
console.log(item)
      return item
  })
}

  // 热门城市列表数据函数
    function HandleCityListHot(hotRes){
      let H = hotRes.data.body
      H.map((name)=>{
      cityListHot.items.push(name)
      })
}

  // 当前城市数据函数
    function HandleCurCityList(cur) {
    curCityList.items.push(cur)
}

  // 获取数据
  Promise.all([
    axios.get(`http://localhost:8080/area/city?level=1`),
    axios.get(`http://localhost:8080/area/hot`),
    getCurrentCity()
    ])
    .then(([res,hotRes,cur])=>{
      
    HandleCityList(res)
    HandleCityListHot(hotRes)
    HandleCurCityList(cur)
    
  setGroups([curCityList,cityListHot,...cityList])
})

},[])


const briefHot=(title)=>{
  if(title&&title=='热门城市'){
    return <div style={{width:"16px",height:"16px",borderRadius:"50%",textAlign:"center",padding:"0 20px 0 0"}}>hot</div>
  } else {
    return title
  }
}

const briefCur=(title)=>{
  if(title&&title=='当前城市'){
    return <div style={{width:"16px",height:"16px",borderRadius:"50%",textAlign:"center"}}>#</div>
  } else {
    return title
  }
}


  return (
    <div className='citylist'>
    {/* 顶部导航栏 */}
    <NavHeader>城市选择</NavHeader>
    {/* IndexBar序列 */}
    <div className='indexbar' style={{ height: window.innerHeight - 45 }}>
      <IndexBar>
        {groups.map(group => {
            const { title, items,key } = group
            return (<IndexBar.Panel index={title} title={`${title}`} key={`${key}`} brief={title=="当前城市"?briefCur(title):briefHot(title)}>
              <List>
                {items.map((item, index) => (<List.Item key={index}>{item.label}</List.Item>))}
              </List>
            </IndexBar.Panel>);
        })}
      </IndexBar>
      </div>
    </div>
    )

}
export default MyCityList

希望实现以下效果：

目前效果，浏览器没有报错，打印item显示的类型是Object，item里面的items类型是Array，然而只显示了当前城市和热门城市的内容，而没有显示其他分类的城市信息：

请问代码出了什么问题？如何修改？望对现有的代码进行举例说明，感谢~

Answer 1

在return前打印下groups，把里面的items数组展开，把items.item数据也展开截图看下