类型错误：无法读取 React 代码中未定义的属性(读取"总计")

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 && globalStats) return <Loader />

最初呈现时，globalStats可能碰巧是未定义的，这样可以防止代码在试图访问未定义的

属性时中断。

Answer 2

之所以会发生这种情况，是因为isFetching是false,globalStats是undefined。

当globalStats是undefined的时候，试图访问globalStats的属性，这个错误将被抛出。

有两种方法来解决这个

解决方案1:

为return 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>
</>
)