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 = []
  axios.get(`http://localhost:8080/area/city?level=1`).then(res=>{
    cityList = res.data.body
    let V = groups.map((item)=>{
      item.items = []
      cityList.map((city)=>{
        if(city.pinyin.slice(0,1).toUpperCase()==item.title){
          item.items.push(city)}
      })
      return item
  })

  // 获取热门城市列表
  let cityListHot = {
    title: "热门城市",
    items: [],
    key: "hot"
  }
  axios.get(`http://localhost:8080/area/hot`).then(hotRes=>{
    cityListHot = hotRes.data.body
    console.log(cityListHot)
  })

  // 获取当前定位城市
  let curCityList = {
    title: "当前城市",
    items: [],
    key: "cur"
  }
  getCurrentCity().then(cur=>{
    curCityList = cur.label
    console.log(curCityList)
  })
  
  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"}}>hotdiv>
  } else {
    return title
  }
}

const briefCur=(title)=>{
  if(title&&title=='当前城市'){
    return <div style={{width:"16px",height:"16px",borderRadius:"50%",textAlign:"center"}}>#div>
  } else {
    return title
  }
}
// 显示城市列表里的每一项里的各城市名称
// function Titles(val){
//   if(/^[a~zA~Z]$/.test(val)){
//     return item.label
//   } else if(/^热门城市$/.test(val)){
//     return cityListHot
//   } else {
//     return curCityList
//   }
// }

  // export default () => {
  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={`${title}`} key={`${key || title}`} brief={title=="当前城市"?briefCur(title):briefHot(title)}>
              <List>
                {items.map((item, index) => (<List.Item key={index}>{item.label}List.Item>))}
                {/* {items.map((item, index) => (<List.Item key={index}>
// 显示城市列表里的每一项里的各城市名称
{Titles(title)}
List.Item>))}
              List>
            IndexBar.Panel>);
        })}
      IndexBar>
      div>
    div>
    )
// }
}
export default MyCityList

目前效果如下：

能成功从数据库里获取到数据复制给cityListHot和curCityList：

请问如何才能已获取的数据显示到热门城市项以及当前城市项下面，如下图效果：

这个 和之前 26个字母 有啥区别吗？ 操作groups 就行了。 groups 是一个数组 ，数组里 有 title 和items。 那你 获取到 热门城市的时候 。 在then方法里 做个判断 。

groups.map((item)=>{if(item.title=="热门城市"){item.items=你获取到的数据}})  

哦还得 调用 setGroups
当前城市同理