往期文章目录：

获取疫情数据

在上一篇 React 17 + Vite + ECharts 实现疫情数据可视化「04 初始化项目」中我们对项目进行了初始化操作，对目录结构进行了更新，然后安装了本次项目所依赖的包，最后实现了一个比较简单的页面。

那么，本篇开始要往实际代码编写了，首先第一步就是获取疫情的数据并进行处理。

非常高兴能与大家在第 5 篇相见，我们进入正文吧！

接口来源

这个接口并非本人编写，同样是为了节省一些成本，前端只做页面渲染，真正的数据由后端返回（假设这个接口就是后端同学给我们写好的）。

1	url: "https://vyps.api.storeapi.net/api/94/219?format=json&appid=6832&sign=4376a0d8b37115ae1b478f2aa19c09fb",

打开上述网址，会返回给我们一系列数据，如下图所示：

我知道会有一小部分小伙伴会疑惑，诶，这个接口返回数据怎么就是 JSON 格式化好了的，我的怎么不是的。

这里，我是用了一个浏览器插件 JSONView，这个对于数据查看还是比较方便的，但需要科学上网才能下载哈，在谷歌商店就能搜索到，如果有访问不了的小伙伴可以留言一下，帮你解决问题。

说明：接口来源于网络，仅供学习之用，并非本人接口，请大家合理使用，共建和谐网络环境。

配置请求，获取数据

现在，我们就在我们项目中配置请求了，首先先获取数据。

在之前创建好的 api 目录中，新建一个名为 getCovid19Data.js 的文件，编写如下代码：

import axios from "axios";

// 获取疫情统计数据
export function getCovidDataList() {
  return axios({
    method: "get",
    url: "https://vyps.api.storeapi.net/api/94/219?format=json&appid=6832&sign=4376a0d8b37115ae1b478f2aa19c09fb",
  });
}

解释一下上述代码，首先第一行，是在「04 初始化项目」这篇文章中安装了 axios 模块，如果有跳过观看并且没明白的小伙伴可以返回再看一下。

接下来就是导出了一个获取疫情统计数据的函数，方法是 get 请求。

之后，我们在 pages/Home 目录下的 Home.jsx 文件中的头部进行导入函数接口：

1	import { getCovidDataList } from "./../../api/getCovid19Data";

同时，第一行需要导入我们在「03 学习 React Hooks」这篇文章中学习的 Hook。

1	import React, { useState, useEffect } from "react";

接下来，就是在 Home 组件中编写基本的请求逻辑代码了，如下所示：

const [mapList, setMapList] = useState([]);

useEffect(async () => {
  const res = await getCovidDataList();
  console.log("获取的疫情统计数据", res);
});

我们看看控制台会打印什么东西：

展开 retdata 就是一系列疫情数据了，如下图所示：

因此，我们需要的就是 retdata 里面的数据了，那么数据获取这一节就结束了，是不是比较轻松呢。

但有一点得注意的是现在的部分字段名并不是我们所需要的，因此我们得对数据进行处理，将一部分字段名进行修改，我们就在下一节来进行处理了。

疫情数据处理

编写工具方法

在上一节中，我们获取到了疫情数据，这一节我们再来写一个方法来对我们的数据进行处理，这里就要用到在「04 初始化项目」这篇文章新建的 utils 目录了，在目录下创建一个名为 utils 的文件，编写如下代码：

// 将数据格式化为地图所需格式的工具
export function getMapDataUtil(list = []) {
  let mapList = [];
  list.forEach((item) => {
    let mapItem = {
      name: item.xArea,
      value: item.confirm,
      ...item,
    };
    mapList.push(mapItem);
  });
  return mapList;
}

解释一下上述代码，因为地图所需的部分格式是需要 name 和 value 两个字段，这里是将获取的数据中的 xArea 作为了 name 字段的值，而 confirm 则作为 value 字段的值。

写好了工具方法之后，我们继续在 Home 组件中进行导入，然后将数据处理，最后将数据通过 useState 将数据进行存放，后续会有需要使用。

1	import { getMapDataUtil } from "./../../utils/utils";

useEffect(async () => {
  const fn = async () => {
    const res = await getCovidDataList();
    const { retdata } = res.data;
    const list = getMapDataUtil(retdata);
    setMapList(list);
  };
  fn();
}, []);

maplist 获取到了之后，我们就可以传递给我们的子组件（components/Map 目录下）Map.jsx 中了，但是考虑到必须有数据了我们子组件才做渲染，那么可以进行一个判定，如下述代码所示：

1	return <>{mapList.length > 0 ? <Map mapList={mapList} /> : null}</>;

完整实现代码

最后，附上整个 Home 组件的实现代码：

import React, { useState, useEffect } from "react";
import Map from "./../../components/Map/Map";
import { getMapDataUtil } from "./../../utils/utils";
import { getCovidDataList } from "./../../api/getCovid19Data";
import s from "./style.module.css";

const Home = () => {
  const [mapList, setMapList] = useState([]);

  useEffect(async () => {
    const fn = async () => {
      const res = await getCovidDataList();
      const { retdata } = res.data;
      const list = getMapDataUtil(retdata);
      setMapList(list);
    };
    fn();
  }, []);

  return <>{mapList.length > 0 ? <Map mapList={mapList} /> : null}</>;
};

export default Home;