好客租房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

相关文章
|
存储 关系型数据库 数据库
PostgreSQL的逻辑备份与物理备份
制定备份和恢复计划是每一个DBA最重要的工作之一,它决定了数据的有效性和完整性。也可以搭建跨越不同数据中心的流复制集群,能有效的帮助你避免单点故障。但是只有一份有效的备份能够帮助从delete或者drop的误操中恢复数据。
3913 0
|
人工智能 机器人 大数据
分享90个行业PPT,总有一款适合您
分享90个行业PPT,总有一款适合您
235 2
|
Java 数据库 Spring
RuoYi 集成H2数据库
RuoYi 集成H2数据库
251 0
|
机器学习/深度学习 存储 PyTorch
PyTorch自定义学习率调度器实现指南
本文将详细介绍如何通过扩展PyTorch的 ``` LRScheduler ``` 类来实现一个具有预热阶段的余弦衰减调度器。我们将分五个关键步骤来完成这个过程。
701 2
|
搜索推荐 安全 数据安全/隐私保护
构建高效网站后台会员管理系统:实战指南与代码示例
【7月更文挑战第5天】在当今的互联网时代,几乎每个网站或应用程序都需要一个强大的会员管理系统来维护用户信息、权限控制以及个性化体验。一个设计良好的会员管理系统不仅能够提升用户体验,还能增强数据安全性和运营效率。本文将深入探讨如何从零开始构建一个网站后台会员管理系统,涵盖系统设计思路、关键技术选型、功能模块实现,以及实战代码示例。
1299 3
|
SQL 存储 OLAP
大数据-133 - ClickHouse 基础概述 全面了解
大数据-133 - ClickHouse 基础概述 全面了解
337 0
|
域名解析 网络协议 安全
DNS隧道
【8月更文挑战第20天】
581 1
|
存储 关系型数据库 MySQL
MySQL中的Redo Log、Undo Log和Binlog:深入解析
【10月更文挑战第21天】在数据库管理系统中,日志是保障数据一致性和完整性的关键机制。MySQL作为一种广泛使用的关系型数据库管理系统,提供了多种日志类型来满足不同的需求。本文将详细介绍MySQL中的Redo Log、Undo Log和Binlog,从背景、业务场景、功能、底层实现原理、使用措施等方面进行详细分析,并通过Java代码示例展示如何与这些日志进行交互。
1094 0
|
编解码
Google Earth Engine ——数据全解析专辑(世界第 4 版网格化人口 (GPWv4) 修订版30 弧秒1公里格网)人口数量和密度数据集
Google Earth Engine ——数据全解析专辑(世界第 4 版网格化人口 (GPWv4) 修订版30 弧秒1公里格网)人口数量和密度数据集
620 0
Google Earth Engine ——数据全解析专辑(世界第 4 版网格化人口 (GPWv4) 修订版30 弧秒1公里格网)人口数量和密度数据集
|
SQL druid 关系型数据库
MySQL连接超时时间wait_timeout导致间歇性报错:communication link failure
MySQL连接超时时间wait_timeout导致间歇性报错:communication link failure
1532 1