Reactjs 反应-卡不'；我没有出现

我是英语初学者。我正在进行一个非常有趣的React项目，名为新冠病毒-19追踪系统。 我在36:21面临一个问题，我应该看到这样的卡片：

相反，我看到的是这样的卡片：

如你所见，显示感染人数的卡片没有出现。我如何解决这个问题

以下是我在

Cards.jsx

文件中的代码：

import React from 'react';
import {Card, CardContent, Typography, Grid } from '@material-ui/core';
import CountUp from 'react-countup';

import styles from './Cards.module.css';

const Cards = ({data: {confirmed, recovered, deaths, lastUpdate} }) => {
    if(!confirmed){
        return 'Loading...';
    }
    return(
        <div className={styles.container}>
            <Grid container spacing={3} justify="center">
                <Grid item component={Card}>
                    <CardContent>
                        <Typography color="textSecondary" gutterBottom>Infected</Typography>
                        <Typography variant="h5">{confirmed.value}</Typography>
                            <CountUp
                                start={0}
                                end={confirmed.value}
                                separator={0}
                            />
                        <Typography color="textSecondary">Real Date</Typography>
                        <Typography variant="body2">Number of Activate Cases of COVID-19</Typography>
                    </CardContent>

                </Grid>
                <Grid item component={Card}>
                    <CardContent>
                        <Typography color="textSecondary" gutterBottom>Recovered</Typography>
                        <Typography variant="h5">Real Data</Typography>
                        <Typography color="textSecondary">Real Date</Typography>
                        <Typography variant="body2">Number of Recoveries from COVID-19</Typography>
                    </CardContent>

                </Grid>
                <Grid item component={Card}>
                    <CardContent>
                        <Typography color="textSecondary" gutterBottom>Deaths</Typography>
                        <Typography variant="h5">Real Data</Typography>
                        <Typography color="textSecondary">Real Date</Typography>
                        <Typography variant="body2">Number of Deaths Caused by COVID-19</Typography>
                    </CardContent>

                </Grid>

            </Grid>

        </div>
    )
}

export default Cards;

以下是我在

index.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;

export { default as Cards } from './Cards/Cards'
export { default as Chart } from './Chart/Chart'
export { default as CountryPicker } from './CountryPicker/CountryPicker'

---

这里是指向我的项目文件的链接：

如果您的获取中一切正常，您可以将数据保存到state。但当您初始化

const data=this.state

时会出现错误，而在该状态下，您的对象位于数据对象所在的位置。因此，由于嵌套对象，您无法获取卡中的已确认对象。 当前数据对象应该如下所示

data{ data { confirmed, recovered, deaths, lastUpdate }}

---

要解决此问题，您应该像这样发送

const data=this.state.data

看起来您应该查看

fetchData

函数。它是否返回一个值，其中

确认
为真？是！在
app.js
文件中，我更改
const data=this.state
to
const data=this.state.data。现在，问题已经解决了。谢谢