Ken428965 2022-10-24 16:27 采纳率: 53.4%
浏览 48
已结题

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

在使用的react版本:

img


已写的代码:

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

希望实现以下效果:

img

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

img

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

展开全部

  • 写回答

2条回答 默认 最新

  • 撸空投的菜鸟 2022-10-25 01:47
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 10月26日
  • 已采纳回答 10月25日
  • 修改了问题 10月24日
  • 创建了问题 10月24日

悬赏问题

  • ¥15 根据历年月数据,用Stata预测未来六个月汇率
  • ¥15 DevEco studio开发工具 真机联调找不到手机设备
  • ¥15 请教前后端分离的问题
  • ¥100 冷钱包突然失效,急寻解决方案
  • ¥15 下载honeyd时报错 configure: error: you need to instal a more recent version of libdnet
  • ¥15 距离软磁铁一定距离的磁感应强度大小怎么求
  • ¥15 霍尔传感器hmc5883l的xyz轴输出和该点的磁感应强度大小的关系是什么
  • ¥15 vscode开发micropython,import模块出现异常
  • ¥20 Excel数据自动录入表单并提交
  • ¥30 silcavo仿真,30分钟,只需要代码