javascript - 为什么 API 中的 1 个值没有保存？

Question

API 这个 https://covid19.mathdro.id/api

抱歉打扰了，但我对这个问题感到非常害怕，我花了近 2 个小时的时间思考问题所在。因此，对于记录和确认来说它工作正常，但对于死亡我有这个问题:

Issue photo

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) {

    }

}

感谢您帮助我!

Answer 1

您在获取数据函数中错过了“s”(根据 API，这是死亡，而不是死亡)。

更新您的这一部分

data: { confirmed, recovered, death, lastUpdate } } = await axios.get(url);

至

data: { confirmed, recovered, deaths, lastUpdate } } = await axios.get(url);

:D