我想问问是否有人可以帮助我。我对React还是相当陌生，并遵循有关构建实时跟踪器应用程序的教程，该应用程序返回有关Covid-19的全球统计信息或特定国家/地区的统计信息。但是，我正在使用其他API。这基于从下拉选择器中进行的选择。
我能够使用来自Global的数据填充卡片和折线图。但是，当我尝试选择一个国家并仅控制台记录该特定国家/地区的数据和国家/地区名称时，我仍然会获得全球数据。
对于如何将数据发送到所选国家/地区的卡组件，然后将折线图换成条形图，对于选择器中不是“全局”的每个选择，我也有些困惑。如果有人可以提供帮助，我将不胜感激。
index.js
import axios from 'axios';
const url = 'https://corona.lmao.ninja/v2';
const lastDays = '?lastdays=90';
export const fetchData = async () => {
try {
const { data: { updated, cases, deaths, recovered }} = await axios.get(`${url}/all`);
return { updated, cases, deaths, recovered };
} catch (error) {
console.log(error);
}
}
export const fetchDailyData = async () => {
try {
const { data } = await axios.get(`${url}/historical/all${lastDays}`);
const labels = Object.keys(data.cases);
const cases = labels.map((name) => data.cases[name]);
const deaths = labels.map((name) => data.deaths[name]);
const recovered = labels.map((name) => data.recovered[name]);
return {labels, cases, deaths, recovered};
} catch (error) {
return error;
}
}
export const fetchCountries = async () => {
try {
const {data} = await axios.get(`${url}/countries`);
const modifiedData = data.map((data) => data.country);
return modifiedData;
} catch (error) {
console.log(error);
}
}
export const fetchSpecificCountries = async (country) => {
try {
const { data } = await axios.get(`${url}/countries/${country}`);
const countries = Object.keys(data.cases);
const cases = countries.map((name) => data.cases[name]);
const deaths = countries.map((name) => data.deaths[name]);
const recovered = countries.map((name) => data.recovered[name]);
const modifiedData = {cases, deaths, recovered};
console.log(modifiedData);
} catch (error) {
}
}
App.js
import React from 'react';
import { Cards, Chart, CountryPicker} from './components';
import styles from './App.module.css';
import {fetchData} from './api';
class App extends React.Component {
state ={
data: {},
country: '',
}
async componentDidMount() {
const fetchedData = await fetchData();
this.setState({data: fetchedData});
}
handleCountryChange = async (country) => {
const fetchedData = await fetchData(country);
this.setState({data: fetchedData, country: country});
console.log(fetchedData);
console.log(country);
//fetch the data
//set the state
}
render() {
const { data } = this.state;
return(
<div className={styles.container}>
<Cards data = {data} />
<CountryPicker handleCountryChange={this.handleCountryChange} />
<Chart data={data} />
</div>
);
}
}
export default App;
Cards.jsx
import React from 'react';
import {Card, CardContent, Typography, Grid} from '@material-ui/core';
import CountUp from 'react-countup';
import Moment from 'react-moment';
import styles from './Cards.module.css';
import cx from 'classnames';
const Cards = ({ data: { updated, cases, deaths, recovered }} ) => {
if (!cases){
return 'Loading...';
}
return(
<div className = {styles.container}>
<Grid container spacing={3} justify="center">
<Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.infected)}>
<CardContent>
<Typography color="textSecondary" gutterBottom>Total Confirmed</Typography>
<Typography variant="h5">
<CountUp start={0} end={cases} duration={2.5} separator="," />
</Typography>
<Typography color="textSecondary">
<Moment fromNow>{updated}</Moment>
</Typography>
<Typography variant="body2" component="p"> Number of active cases of COVID-19. </Typography>
</CardContent>
</Grid>
<Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.deaths)}>
<CardContent>
<Typography color="textSecondary" gutterBottom>Total Deaths</Typography>
<Typography variant="h5">
<CountUp start={0} end={deaths} duration={2.5} separator=","/>
</Typography>
<Typography color="textSecondary">
<Moment fromNow>{updated}</Moment>
</Typography>
<Typography variant="body2" component="p"> Number of deaths cases of COVID-19. </Typography>
</CardContent>
</Grid>
<Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.recovered)}>
<CardContent>
<Typography color="textSecondary" gutterBottom>Total Recovered</Typography>
<Typography variant="h5">
<CountUp start={0} end={recovered} duration={2.5} separator="," />
</Typography>
<Typography color="textSecondary">
<Moment fromNow>{updated}</Moment>
</Typography>
<Typography variant="body2" component="p"> Number of recovered cases of COVID-19. </Typography>
</CardContent>
</Grid>
</Grid>
</div>
)
}
export default Cards;
Chart.jsx
import React, { useState, useEffect } from 'react';
import { Line, Bar } from 'react-chartjs-2';
import { fetchDailyData } from '../../api';
import styles from './Chart.module.css';
const Chart = () => {
const [dailyData, setDailyData] = useState([]);
useEffect(() => {
const fetchAPI = async () => {
setDailyData(await fetchDailyData());
}
fetchAPI();
}, []);
const barChart = (
<Bar
data={{
labels: ['Infected', 'Recovered', 'Deaths'],
datasets: [
{
label: 'People',
backgroundColor: ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0, 0.5)', 'rgba(255, 0, 0, 0.5)'],
data: [100, 200, 300],
},
],
}}
options={{
legend: { display: false },
title: { display: true, text: `Current state` },
}}
/>
);
const lineChart = (
<Line data = {
{
labels: dailyData.labels,
datasets: [{
data:dailyData.cases,
label: 'Infected',
borderColor: '#3333ff',
fill: true,
}, {
data: dailyData.deaths,
label: 'Deaths',
borderColor: 'red',
backgroundColor: 'rgba(255, 0, 0, 0.5)',
fill: true,
},
{
data: dailyData.recovered,
label: 'Recovered',
borderColor: 'green',
backgroundColor: 'rgba(0, 255, 0, 0.5)',
fill: true,
}],
}
}
/>
);
return (
<div className = { styles.container }>
{lineChart}
{barChart}
</div>
);
};
export default Chart;