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实现疫情数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。