前端学习（2237）：react实现疫情数据

import React from 'react';
import ReactDOM from 'react-dom';
import jsonData from './code.json'console.log(jsonData)
let provinceObj = {}/* let provinceObj={"广东省":{confirm:0,suspect:0,heal:0,deal:0}} */
jsonData.data.list.forEach((item, i) => {if (provinceObj[item.province] == undefined) {provinceObj[item.province] = {confirm: 0,suspect: 0,heal: 0,deal: 0}}item.confirm = item.confirm ? item.confirm : 0;item.suspect = item.suspect ? item.suspect : 0;item.heal = item.heal ? item.heal : 0;item.deal = item.deal ? item.deal : 0;provinceObj[item.province] = {confirm: provinceObj[item.province].confirm + item.confirm,suspect: provinceObj[item.province].suspect + item.suspect,heal: provinceObj[item.province].heal + item.heal,deal: provinceObj[item.province].deal + item.deal,}
})
console.log(provinceObj)
let provinceList = []
for (const key in provinceObj) {provinceObj[key].name = key;provinceList.push(provinceObj[key])
}console.log(provinceList)let provinceListSort = provinceList.sort((a, b) => {if (a.confirm > b.confirm) {return 1;} else {return -1;}
})
console.log(provinceListSort)class Bili extends React.Component {constructor(props) {super(props)}render() {return ( <div ><ul ><li ><span > 地区 < /span> <span > 确诊 < /span> <span > 死亡 < /span> <span > 痊愈 < /span> < /li > {this.props.list.map((item, index) => {return ( <li ><span > { item.province } < /span> <span > { item.confirm } < /span> <span > { item.dead } < /span> <span > { item.heal } < /span> < /li >)})} </ul> < /div >)}
}
ReactDOM.render( < Bili list = { provinceListSort }/ > , document.querySelector("#root"))

运行结果

前端学习（2237）：react实现疫情数据相关推荐

【前端学习】React学习资料
React 是一种开源的 JavaScript 库,用于构建用户界面.它由 Facebook 开发并维护,已经成为了当今最流行的前端库之一.与其他框架不同,React 主要专注于视图层(View),旨 ...
【前端学习】React学习笔记-事件、生命周期、虚拟DOMdiffing
跟着尚硅谷的天禹老师学习React 看视频可以直接点击 b站视频地址 React中的事件处理补充ref 上面的ref在React官网中提到不要被过度使用,在一些情况下可以使用其他方法来获取数据,比如 ...
学习笔记：获取疫情数据，并绘制可视化地图
入门小菜鸟的学习笔记,希望大佬们帮忙纠错啦~侵权立删. 一.加载库 import re import time import json import requests import pandas as ...
前端学习（2310）：数据请求和json-server
app.js import React from 'react';import './App.css'; import Home from './components/Home.js' import ...
前端学习之React篇-（1）最简React——Html直接引用React
当新手想看看React是什么样的,语法是什么样的,那么这里给出了一个最简单的使用React的方法--就是在html页面中直接引入React的js文件,然后在这个html中直接写react的js即可,简 ...
前端学习（2880）：数据代理和劫持
前端学习（2770）：数据缓存
前端学习（2615）：数据映射map
第一步引入第二步计算属性
前端学习（2559)：双向数据和单向数据不冲突

前端学习（2237）：react实现疫情数据

前端学习（2237）：react实现疫情数据相关推荐

最新文章

热门文章