TypeError：无法读取React代码中未定义的属性（reading＆＃x27; Total＆＃x27;）

Question

使用Coinranking API获取硬币信息，并且代码不断丢弃此错误，我不知道有什么问题，它以前在本地运行，但是当我试图托管它时，该错误就会丢弃。现在，它也在本地抛出了错误，我认为它与全局统计初始化中的语法有关，但我不确定如何修复它。这是代码：

import React from 'react';
import millify from 'millify';
import { Typography, Row, Col, Statistic } from 'antd';
import { Link } from 'react-router-dom';

import { useGetCryptosQuery } from '../services/cryptoApi';
import Cryptocurrencies from './Cryptocurrencies';
import News from './News';
import Loader from './Loader';

const { Title } = Typography;

const Homepage = () => {
  const { data, isFetching } = useGetCryptosQuery(10);
  const globalStats = data?.data?.stats;

  if (isFetching) return <Loader />;

  return (
    <>
      <Title level={2} className="heading">Global Crypto Stats</Title>
      <Row gutter={[32, 32]}>
        <Col span={12}><Statistic title="Total Cryptocurrencies" value={globalStats.total} /></Col>
        <Col span={12}><Statistic title="Total Exchanges" value={millify(globalStats.totalExchanges)} /></Col>
        <Col span={12}><Statistic title="Total Market Cap:" value={`$${millify(globalStats.totalMarketCap)}`} /></Col>
        <Col span={12}><Statistic title="Total 24h Volume" value={`$${millify(globalStats.total24hVolume)}`} /></Col>
        <Col span={12}><Statistic title="Total Cryptocurrencies" value={globalStats.total} /></Col>
        <Col span={12}><Statistic title="Total Markets" value={millify(globalStats.totalMarkets)} /></Col>
      </Row>
      <div className="home-heading-container">
        <Title level={2} className="home-title">Top 10 Cryptos In The World</Title>
        <Title level={3} className="show-more"><Link to="/cryptocurrencies">Show more</Link></Title>
      </div>
      <Cryptocurrencies simplified />
      <div className="home-heading-container">
        <Title level={2} className="home-title">Latest Crypto News</Title>
        <Title level={3}><Link to="/news">Show more</Link></Title>
      </div>
      <News simplified />
    </>
  );
};

export default Homepage;

Answer 1

尝试if（iSfetching＆amp;＆amp; globalStats）返回＆lt; loader /＆gt; < /code>

最初是在渲染时，globalStats可能是未定义的，这样，当它试图访问未定义的属性时，您可以防止代码破裂

Answer 2

之所以发生这种情况，是因为有一个场景，iSfetching is false和globalStats is undefined。

当试图访问GlobalStats的属性时，globalStats是未定义的，该错误将被丢弃。

有两种方法可以解决此

解决方案1：

添加一个守卫语句到返回null或您的加载横幅（取决于您希望您的后备是什么）：

if (!globalStats) return null; // or return your LoadingBanner

解决方案2：

到处都有globalStats。定义您可以选择链接您的属性，例如globalStats？.myproperty，然后您可以像以下后返回一样进行空字符串此：globalstats？.myproperty || “”。

在您的情况下，您需要将统计内容更改为以下方式：

<Statistic title="Total Cryptocurrencies" value={globalStats?.total || ""} />
<Statistic title="Total Exchanges" value={millify(globalStats?.totalExchanges || "")} />
<Statistic title="Total Market Cap:" value={`${millify(globalStats?.totalMarketCap || "")}`} />
<Statistic title="Total 24h Volume" value={`${millify(globalStats?.total24hVolume || "")}`} />
<Statistic title="Total Cryptocurrencies" value={globalStats?.total || ""} />
<Statistic title="Total Markets" value={millify(globalStats?.totalMarkets "")} />

Answer 3

if(!globalStats || isFetching) return 'Loading...'
else return (
    <>
      <Title level={2} className="heading">Global Crypto Stats</Title>
      <Row>
        <Col span={12}><Statistic title="Total Cryptocurrencies" value={globalStats.total}/></Col>
        <Col span={12}><Statistic title="Total Exchanges" value={millify(globalStats.totalExchanges)}/></Col>
        <Col span={12}><Statistic title="Total Market Cap" value={`${millify(globalStats.totalMarketCap)}`}/></Col>
        <Col span={12}><Statistic title="Total 24h Volume" value={`${millify(globalStats.total24hVolume)}`}/></Col>
        <Col span={12}><Statistic title="Total Markets" value={millify(globalStats.totalMarkets)}/></Col>
      </Row>
    </>
  )