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

在使用的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"
  }
  
  // 获取城市列表数据
  axios.get(`http://localhost:8080/area/city?level=1`).then(res=>{
    cityList = res.data.body
    let V = groups.map((item)=>{
      cityList.map((city)=>{
        if(city.pinyin.slice(0,1).toUpperCase()==item.title){
          item.items.push(city)}
      })
      return item
  })

  // // 获取热门城市列表数据
  // axios.get(`http://localhost:8080/area/hot`).then((hotRes)=>{
  //   let H = hotRes.data.body
  //   H.map((name)=>{
  //     cityListHot.items.push(name)
  //     console.log(cityListHot.items)
  //     })
  // })

  // 获取当前城市数据
  getCurrentCity().then(cur=>{
    curCityList.items.push(cur)
  })

  setGroups([curCityList,cityListHot,...V])
})
},[])


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

目前效果：

如果把以下这些注释掉的代码解除注释：

  // // 获取热门城市列表数据
  // axios.get(`http://localhost:8080/area/hot`).then((hotRes)=>{
  //   let H = hotRes.data.body
  //   H.map((name)=>{
  //     cityListHot.items.push(name)
  //     console.log(cityListHot.items)
  //     })
  // })

在解除以上代码的注释并保存后返回到chrome浏览器，浏览器显示如下，热门城市项下可显示各城市名称，且浏览器右边的区域没有显示报错：

但是，过了一秒钟时间左右，浏览器界面显示如下，界面左边显示了两次当前城市和热门城市项，其中两次的当前城市项下均能显示城市名称，而热门城市项下的第一次能显示各城市名称，第二次则没有显示各城市名称，界面右边显示报错，且打印出来的内容为遍历了4次的Array：

接着，刷新浏览器页面后则显示如下，热门城市项下没有显示各城市名称，且打印结果为遍历了4次的Array：

希望实现以下效果，热门城市项下显示各个城市名称，且打印不报错：

在当前城市或热门城市部分代码里console.log后均出现浏览器报错，请问代码出了什么问题？如何修改？望对现有的代码进行举例说明，感谢~

你setGroups时数据还没拿到，你需要await到接口返回数据后再setGroups

浏览器 里是警告信息， 因为你的key值是中文 。