Javascript 卡组件中显示道具的问题-反应_Javascript_Reactjs_Axios

Javascript 卡组件中显示道具的问题-反应

javascript reactjs

Javascript 卡组件中显示道具的问题-反应,javascript,reactjs,axios,Javascript,Reactjs,Axios,我正在使用开源API在React中构建一个跟踪器应用程序。我正在使用Axios进行HTTP请求。当我在index.js中传递从GET函数检索到的对象时，我得到一个错误，该错误如下： TypeError:无法读取未定义的属性“newconfirm” 根据下面的代码，有人知道为什么会发生这种情况，以及为什么参数没有定义？我试图改变我对参数的分解，以反映API构造参数的方式，但没有成功 index.js import axios from 'axios'; const url = 'https://

我正在使用开源API在React中构建一个跟踪器应用程序。我正在使用Axios进行HTTP请求。当我在index.js中传递从GET函数检索到的对象时，我得到一个错误，该错误如下：

TypeError:无法读取未定义的属性“newconfirm”

根据下面的代码，有人知道为什么会发生这种情况，以及为什么参数没有定义？我试图改变我对参数的分解，以反映API构造参数的方式，但没有成功

index.js

import axios from 'axios';

const url = 'https://api.covid19api.com/summary';

export const fetchData = async () => {
    try {
        const { data: { Global: { NewConfirmed, TotalConfirmed, NewDeaths, TotalDeaths, NewRecovered, TotalRecovered, } } } = await axios.get(url);


        return { NewConfirmed, TotalConfirmed, NewDeaths, TotalDeaths, NewRecovered, TotalRecovered,  } ;
    } catch (error) {
        console.log(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: {},
    }

    async componentDidMount() {
        const fetchedData = await fetchData();

        this.setState({data: fetchedData});

    }

    render() {

        const { data } = this.state;
        return(
            <div className={styles.container}>
                <Cards data = {data} />
                <CountryPicker />
                <Chart />
            </div>
        );
    }
}

export default App;

从“React”导入React；
从“/components”导入{卡片、图表、CountryPicker}；
从“./App.module.css”导入样式；
从“/api”导入{fetchData}；
类应用程序扩展了React.Component{
陈述={
数据：{}，
}
异步组件didmount（）{
const fetchedData=等待fetchData（）；
this.setState（{data:fetchedData}）；
}
render（）{
const{data}=this.state；
返回(
);
}
}
导出默认应用程序；

Cards.jsx

import React from 'react';
import {Card, CardContent, Typography, Grid} from '@material-ui/core';
import styles from './Cards.module.css';

const Cards = ({data: { Global: { NewConfirmed, TotalConfirmed, NewDeaths, TotalDeaths, NewRecovered, TotalRecovered } } }) => {    


    return(
        <div className = {styles.container}>
            <Grid container spacing={3} justify="center">
                <Grid item component={Card}>
                    <CardContent>
                        <Typography color="textSecondary" gutterBottom>New Confirmed</Typography>
                        <Typography variant="h5">{NewConfirmed.value}</Typography>
                        <Typography color="textSecondary">REAL DATE</Typography>
                        <Typography variant="body2">Number of active cases of COVID-19.</Typography>
                    </CardContent>
                </Grid>
                <Grid item component={Card}>
                    <CardContent>
                        <Typography color="textSecondary" gutterBottom>Total Confirmed</Typography>
                        <Typography variant="h5">{TotalConfirmed.value}</Typography>
                        <Typography color="textSecondary">REAL DATE</Typography>
                        <Typography variant="body2">Number of active cases of COVID-19.</Typography>
                    </CardContent>
                </Grid>
                <Grid item component={Card}>
                    <CardContent>
                        <Typography color="textSecondary" gutterBottom>New Deaths</Typography>
                        <Typography variant="h5">{NewDeaths.value}</Typography>
                        <Typography color="textSecondary">REAL DATE</Typography>
                        <Typography variant="body2">Number of active cases of COVID-19.</Typography>
                    </CardContent>
                </Grid>
                <Grid item component={Card}>
                    <CardContent>
                        <Typography color="textSecondary" gutterBottom>Total Deaths</Typography>
                        <Typography variant="h5">REAL DATA</Typography>
                        <Typography color="textSecondary">REAL DATE</Typography>
                        <Typography variant="body2">Number of recoveries of COVID-19.</Typography>
                    </CardContent>
                </Grid>
                <Grid item component={Card}>
                    <CardContent>
                        <Typography color="textSecondary" gutterBottom>New Recovered</Typography>
                        <Typography variant="h5">REAL DATA</Typography>
                        <Typography color="textSecondary">REAL DATE</Typography>
                        <Typography variant="body2">Number of deaths of COVID-19.</Typography>
                    </CardContent>
                </Grid>
                <Grid item component={Card}>
                    <CardContent>
                        <Typography color="textSecondary" gutterBottom>Total Recovered</Typography>
                        <Typography variant="h5">REAL DATA</Typography>
                        <Typography color="textSecondary">REAL DATE</Typography>
                        <Typography variant="body2">Number of deaths of COVID-19.</Typography>
                    </CardContent>
                </Grid>
            </Grid>
        </div>
    )

}

export default Cards;

从“React”导入React；
从“@material ui/core”导入{Card，CardContent，排版，Grid}；
从“/Cards.module.css”导入样式；
const Cards=（{data:{Global:{newconfirm，totalconfirm，NewDeaths，TotalDeaths，NewRecovered，TotalRecovered}}}}）=>{
返回(
新确认
{newconfirm.value}
真实日期
新冠病毒-19活跃病例数。
确认总数
{totalconfirm.value}
真实日期
新冠病毒-19活跃病例数。
新死亡
{newdeath.value}
真实日期
新冠病毒-19活跃病例数。
总死亡人数
真实数据
真实日期
新冠病毒-19的回收率。
新恢复
真实数据
真实日期
新冠病毒-19的死亡人数。
总回收量
真实数据
真实日期
新冠病毒-19的死亡人数。
)
}
导出默认卡；

在compountDidMount之后（即调用render方法时）获取API结果。因此，组件呈现时没有任何数据，

newconfirm

未定义，因为API调用尚未完成

尝试在呈现组件之前添加检查

从“React”导入React；
从“@material ui/core”导入{Card，CardContent，排版，Grid}；
从“/Cards.module.css”导入样式；
const Cards=（{data:{Global:{newconfirm，totalconfirm，NewDeaths，TotalDeaths，NewRecovered，TotalRecovered}}}}）=>{
如果（！newconfirm）返回空值；
返回(
新确认
{newconfirm.value}
真实日期
新冠病毒-19活跃病例数。
确认总数
{totalconfirm.value}
真实日期
新冠病毒-19活跃病例数。
新死亡
{newdeath.value}
真实日期
新冠病毒-19活跃病例数。
总死亡人数
真实数据
真实日期
新冠病毒-19的回收率。
新恢复
真实数据
真实日期
新冠病毒-19的死亡人数。
总回收量
真实数据
真实日期
新冠病毒-19的死亡人数。
)
}
导出默认卡在compountDidMount之后（即调用render方法时）获取API结果。因此，组件呈现时没有任何数据，newconfirm
未定义，因为API调用尚未完成
尝试在呈现组件之前添加检查

从“React”导入React；
从“@material ui/core”导入{Card，CardContent，排版，Grid}；
从“/Cards.module.css”导入样式；
const Cards=（{data:{Global:{newconfirm，totalconfirm，NewDeaths，TotalDeaths，NewRecovered，TotalRecovered}}}}）=>{
如果（！newconfirm）返回空值；
返回(
新确认
{newconfirm.value}
真实数据
const Cards = ({data: { Global: { NewConfirmed, TotalConfirmed, NewDeaths, TotalDeaths...

const Cards = ({data: { NewConfirmed, TotalConfirmed, NewDeaths, TotalDeaths...