TypeError: Cannot read property 'value' of undefinedとなります

Question

コロナのトラッカー作りの最中でエラーが表示されたのですが、タイポだと思ったので自分なりに探してみてはものの間違いの個所が見つけられなかったのでエラー解消法のご教授お願いします。

発生している問題・エラーメッセージ

該当のソースコード

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 varaint="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 of COVID-19</Typography>
            </CardContent>
          </Grid>
          <Grid item component={Card}>
            <CardContent>
              <Typography color="textSecondary" gutterBottom>Recovered</Typography>
              <Typography varaint="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}>
            <CardContent>
              <Typography color="textSecondary" gutterBottom>Deaths</Typography>
              <Typography varaint="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;

補足情報（OSと参考動画）

OS Windows10

参考動画

Answer 1

Cards を呼び出しかたがわかりませんが
recovered が undefined のまま呼ばれるパターンがあります。

   if(!confirmed || !recovered) {
    return 'Loading...';
   }

とするか
データが読み込まれてから Cards コンポーネントを呼ぶ形にするのがいいかと思います。

Comments

[obaq_4309]

順序が逆でしたか????大変助かりました！ありがとうございます