React项目npm start时报TypeError: Cannot read properties of undefined (reading 'total')

你遇到的错误是因为globalStats变量为undefined时，尝试访问它的total属性导致的。虽然代码里通过isFetching判断了加载状态，但存在请求完成但返回数据结构不符合预期（比如data、data.data或data.data.stats不存在）的情况，这时候globalStats就会是undefined，直接访问globalStats.total就会触发这个错误。

解决方案 #

• 方案1：增加globalStats空值校验
  在渲染统计数据前，补充判断globalStats是否存在，若不存在则继续显示加载组件或错误提示：

if (isFetching || !globalStats) return <Loader />;

• 方案2：用可选链操作符兜底
  访问globalStats的属性时，使用?.操作符避免直接读取undefined的属性，还可以搭配||设置默认值，避免显示异常：

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

• 方案3：处理请求错误状态
  RTK Query的useGetCryptosQuery还返回error状态，建议补充错误处理逻辑，避免请求失败时页面崩溃：

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

if (isFetching) return <Loader />;
if (error) return <div>数据加载失败，请稍后重试</div>;
if (!globalStats) return <div>数据格式异常</div>;

修改后完整代码示例 #

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, error } = useGetCryptosQuery(10);
  const globalStats = data?.data?.stats;

  if (isFetching) return <Loader />;
  if (error) return <div>数据加载失败，请稍后重试</div>;
  if (!globalStats) return <div>数据格式异常</div>;

  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;

内容的提问来源于stack exchange，提问作者Raffael Ghilus