当我输入我的反应 js 组件时它运行良好但是当我重新加载浏览器时它给我错误 Cannot read 属性 'value' of undefined

Question

这是应用程序 js 从“反应”导入 React

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() {
        return (
            <div className={styles.container}>
                <Cards data={this.state.data}/>
                <CountryPicker />
                <Chart />
            </div>
        )
    }
}

export default App

''' 这是 Card 组件

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

const Cards = (props) => {
   console.log(props)
    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"><CountUp start={0} end={props.data.confirmed.value} separator="," duration={2} /></Typography>
                <Typography color="textSecondary">{new Date(props.data.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 variant="h5"><CountUp start={0} end={props.data.recovered.value} separator="," duration={2} /></Typography>
                <Typography color="textSecondary">{new Date(props.data.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 variant="h5"><CountUp start={0} end={props.data.deaths.value} separator="," duration={2} /></Typography>
                <Typography color="textSecondary">{new Date(props.data.lastUpdate).toDateString()}</Typography>
                <Typography variant="body2">Number of Deaths caused by Covid-19</Typography>
               </CardContent>
            </Grid> 
        </Grid>
      </div>
    )
}

export default Cards

'''

Answer 1

因为初始状态未定义。将您的代码放在 if 语句中，这样它就不会出错。

<div className={styles.container}>
  if(this.state) {
    <Cards data={this.state.data}/>
  } else {
    <p>Loading data...</p>
  }
  <CountryPicker />
  <Chart />
</div>

Answer 2

您可以使用 optional chaining 检查对象中是否有数据。

所以试试下面的方法：-

// add optional chaining for below 
props.data.confirmed.value => props.data.confirmed?.value
props.data.recovered.value => props.data.recovered?.value
props.data.deaths.value => props.data.deaths?.value

当我输入我的反应 js 组件时它运行良好但是当我重新加载浏览器时它给我错误 Cannot read 属性 'value' of undefined

when I type my react js component it is doing well but when i reload the browser it gives me error Cannot read property 'value' of undefined

javascript

components

jsx

reactjs