好客租房135-获取并处理城市列表数据(热门处理数据)

简介: 好客租房135-获取并处理城市列表数据(热门处理数据)
import React from 'react'
import axios from 'axios'
//导入axios
//导入navBar组件
import { NavBar, Icon } from 'antd-mobile'
import './index.scss'
// 数据格式化的方法
// list: [{}, {}]
const formatCityData = list => {
    const cityList = {}
    // const cityIndex = []
    // 1 遍历list数组
    list.forEach(item => {
      // 2 获取每一个城市的首字母
      const first = item.short.substr(0, 1)
      // 3 判断 cityList 中是否有该分类
      if (cityList[first]) {
        // 4 如果有,直接往该分类中push数据
        // cityList[first] => [{}, {}]
        cityList[first].push(item)
      } else {
        // 5 如果没有,就先创建一个数组,然后,把当前城市信息添加到数组中
        cityList[first] = [item]
      }
    })
    // 获取索引数据
    const cityIndex = Object.keys(cityList).sort()
    return {
      cityList,
      cityIndex
    }
  }
class cityList extends React.Component {
  state = {
    cityList: [],
  }
  componentDidMount() {
    this.getCityList()
  }
  async getCityList() {
    const res = await axios.get('http://localhost:8080/area/city?level=1')
    console.log(res, 'resss')
    const { cityList, cityIndex } = formatCityData(res.data.body)
    console.log(cityList, cityIndex)
        const hotRes = await axios.get('http://localhost:8080/area/hot')
    console.log(hotRes, 'hotRes')
        cityList['hot']=hotRes.data.body
        cityIndex.unshift("hot")
        console.log(cityList, cityIndex,"hotList")
  }
  render() {
    return (
      <div className="citylist">
        <NavBar
          className="navbar"
          mode="light"
          icon={<i className="iconfont icon-back" />}
          onLeftClick={() => this.props.histoty.push.go(-1)}
          // 导航栏右边内容
          // rightContent={[
          //  
          //    key="0"
          //    type="search"
          //    style={{ marginRight: '16px' }}
          //  />,
          //  ,
          // ]}
        >
          城市选择
        </NavBar>
      </div>
    )
  }
}
export default cityList

运行结果

图片.png

相关文章
|
SQL 关系型数据库 MySQL
省市区管理sql数据表设计、以及全国省市区全部最新数据
省市区管理sql数据表设计、以及全国省市区全部最新数据
1165 0
省市区管理sql数据表设计、以及全国省市区全部最新数据
|
7月前
|
SQL 关系型数据库 MySQL
分享一份全国行政区划sql数据库表
分享一份全国行政区划sql数据库表
|
数据格式
好客租房134-获取并处理城市列表数据
好客租房134-获取并处理城市列表数据
83 0
好客租房134-获取并处理城市列表数据
好客租房133-获取并处理城市列表数据
好客租房133-获取并处理城市列表数据
78 0
好客租房133-获取并处理城市列表数据
|
索引
好客租房145-渲染城市列表(展示城市索引)
好客租房145-渲染城市列表(展示城市索引)
141 0
好客租房145-渲染城市列表(展示城市索引)
好客租房176-获取房源数据优化
好客租房176-获取房源数据优化
104 0
好客租房176-获取房源数据优化
|
索引
好客租房131-城市功能选择分析
好客租房131-城市功能选择分析
77 0
|
索引
好客租房144-渲染城市列表
好客租房144-渲染城市列表
102 0
好客租房144-渲染城市列表
|
索引
好客租房149-渲染右侧索引列表(点击索引指定该索引城市)
好客租房149-渲染右侧索引列表(点击索引指定该索引城市)
96 0
好客租房149-渲染右侧索引列表(点击索引指定该索引城市)
|
资源调度 数据处理
好客租房115-获取数据
好客租房115-获取数据
122 0