在使用的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,然而只显示了当前城市和热门城市的内容,而没有显示其他分类的城市信息:
请问代码出了什么问题?如何修改?望对现有的代码进行举例说明,感谢~