React - Card不显示

Question

我是React的初学者。我在YouTube上经历了一个非常有趣的React项目，叫做新冠肺炎跟踪器。我在36:21遇到了一个问题，我应该像这样看到Card：

​

相反，我看到的Card是这样的：

​

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

以下是我在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;

以下是我在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中的代码

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

以下是我的项目文件的链接：

Answer 1

如果fetch中的一切都正确，则将数据保存到状态。但是当你初始化const data = this.state时会出现错误，而在状态中你有对象，数据对象位于哪里。因此，由于嵌套对象，您无法在您的卡片中获取确认。当前数据对象应如下所示

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

为了解决这个问题，你应该像这样发送const data = this.state.data