API 这个 https://covid19.mathdro.id/api
抱歉打扰了,但我对这个问题感到非常害怕,我花了近 2 个小时的时间思考问题所在。 因此,对于记录和确认来说它工作正常,但对于死亡我有这个问题:
import React from 'react';
import {Card, CardContent, Typography, Grid} from '@material-ui/core';
import CountUp from 'react-countup';
import cx from 'classnames';
import styles from './Cards.module.css'
const Cards = ({data: {deaths, confirmed, recovered, lastUpdate } } ) => {
if(!confirmed) {
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>Infected</Typography>
<Typography variant="h5">
<CountUp
start={0}
end={confirmed.value}
duration={2.5}
separator=","
/>
</Typography>
<Typography color="textSecondary">{new Date(lastUpdate).toDateString()}</Typography>
<Typography variant="body2">Number of active cases</Typography>
</CardContent>
</Grid>
<Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.recovered)}>
<CardContent>
<Typography color="textSecondary" gutterBottom>Recovered</Typography>
<Typography variant="h5">
<CountUp
start={0}
end={recovered.value}
duration={2.5}
separator=","
/>
</Typography>
<Typography color="textSecondary">{new Date(lastUpdate).toDateString()}</Typography>
<Typography variant="body2">Number of recoveries from COVID-19</Typography>
</CardContent>
</Grid>
<Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.deaths)}>
<CardContent>
<Typography color="textSecondary" gutterBottom>Deaths</Typography>
<Typography variant="h5">
<CountUp
start={0}
end={deaths.value}
duration={2.5}
separator=","
/>
</Typography>
<Typography color="textSecondary">{new Date(lastUpdate).toDateString()}</Typography>
<Typography variant="body2">Number of deaths caused by COVID-19</Typography>
</CardContent>
</Grid>
</Grid>
</div>
)
}
export default Cards;
这是我的 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: {},
}
async componentDidMount() {
const fetchedData = await fetchData();
this.setState({ data: fetchedData });
}
render() {
const {data} = this.state;
return (
<div className={styles.container}>
<Cards data={data}/>
<Chart />
<CountryPicker />
</div>
)
}
}
export default App;
所以,我尝试不死亡,它有效,但没有。
index.js
import axios from 'axios';
const url = 'https://covid19.mathdro.id/api';
export const fetchData = async () => {
try {
const { data: { confirmed, recovered, death, lastUpdate } } = await axios.get(url);
return {confirmed, recovered, death, lastUpdate};
} catch (error) {
}
}
感谢您帮助我!
最佳答案
您在获取数据函数中错过了“s”(根据 API,这是死亡,而不是死亡)。
更新您的这一部分
data: { confirmed, recovered, death, lastUpdate } } = await axios.get(url);
至
data: { confirmed, recovered, deaths, lastUpdate } } = await axios.get(url);
:D
关于javascript - 为什么 API 中的 1 个值没有保存?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61405018/