React学习笔记【10】

第十二节

React实现新冠疫情地图

疫情数据获取
https://c.m.163.com/ug/api/wuhan/app/data/list-total

axios

npm install axios --save
例：spider.js

---

本节代码

请自行下载list-total.json放置到项目src目录下

spider.js

let axios = require('axios');

(async function () {
    const url = "https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=" + new Date().getTime()
    let res = await axios.get(url)
    console.log(res.data);
})()

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import jsonData from './list-total.json'

//jsonData 相当于向后台发ajax请求
// console.log(jsonData.data.areaTree);
// console.log(jsonData.data.areaTree[0].name);//国家名
// console.log(jsonData.data.areaTree[0].today.confirm);//今日确诊
// console.log(jsonData.data.areaTree[0].today.suspect);//今日疑似
// console.log(jsonData.data.areaTree[0].today.dead);//死亡病例
// console.log(jsonData.data.areaTree[0].today.heal);//今日治愈



let countriesObj = {}

jsonData.data.areaTree.forEach((item, i) => {
    item.today.confirm = item.today.confirm ? item.today.confirm : 0;
    item.today.suspect = item.today.suspect ? item.today.suspect : 0;
    item.today.dead = item.today.dead ? item.today.dead : 0;
    item.today.heal = item.today.heal ? item.today.heal : 0;

    countriesObj[item.name] = {
        confirm: item.today.confirm,
        suspect: item.today.suspect,
        dead: item.today.dead,
        heal: item.today.heal
    }

})
console.log(countriesObj);

let countriesList = []
for (const key in countriesObj) {
    countriesObj[key].country = key
    countriesList.push(countriesObj[key])
}


//排序
countriesList.sort((a, b) => {
    return a.confirm < b.confirm ? 1 : -1;
})

console.log(countriesList)


// ----------------------------------------
class COVIDList extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <h1>全球今日疫情动态</h1>
                <table style={{ 'border': '1px solid #ccc', padding: '5%' }}>
                    <thead style={{ backgroundColor: '#ccc' }}>
                        <tr>
                            <th>编号</th>
                            <th>地区</th>
                            <th>确诊</th>
                            <th>疑似</th>
                            <th>死亡</th>
                            <th>治愈</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            this.props.countriesList.map((item, index) => {
                                return (
                                    <tr key={index} style={{ backgroundColor: '#ddd' }}>
                                        <td>{index + 1}</td>
                                        <td>{item.country}</td>
                                        <td>{item.confirm}</td>
                                        <td>{item.suspect}</td>
                                        <td>{item.dead}</td>
                                        <td>{item.heal}</td>
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>
            </div>
        )
    }
}

ReactDOM.render(
    <COVIDList countriesList={countriesList} />
    ,
    document.querySelector("#root")
)