为什么API的1个值不保存?

API这一个 https:/covid19.mathdro.idapi。

抱歉打扰了,但我被这个问题吓坏了,差不多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;

所以,我试了一下没有死亡的情况下,它可以工作,但是没有死亡的情况下。

索引.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);

😀

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何在java中用Escape键替换Jbutton?

2022-9-8 22:44:21

未分类

React JS和Spring boot CORS政策

2022-9-8 22:44:23

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索