React.Suspense配套Loading组件不显示问题求助

核心问题分析 #

你的Suspense组件没有按预期显示Loading，本质是两个原因：

1. React.lazy加载速度过快：RosterTable是本地组件文件，浏览器加载耗时极短，Suspense的fallback还来不及渲染就完成了组件加载。
2. 数据获取不在Suspense监听范围内：你通过useEffect触发异步请求，这是组件渲染完成后执行的操作，而Suspense仅监听组件渲染阶段抛出的Promise（比如React.lazy加载组件的Promise、支持Suspense的数据库在渲染时抛出的等待Promise），因此这种异步请求的加载状态无法触发Suspense。

解决方案 #

方案一：组件内部处理数据加载状态（最简单直接） #

既然Suspense不处理useEffect发起的异步请求，直接在RosterTable中判断数据状态，手动显示Loading：
修改RosterTable.js：

import { useRosterViewer } from "./useRosterViewer";
import handleAPIError from "../components/common/handleAPIError";
import Loading from "../components/common/Loading";

export default function RosterTable(){
    const { error, data } = useRosterViewer();
    
    if (error) {
        return handleAPIError(error);
    }
    // 数据未加载完成时显示Loading
    if (data === null) {
        return <Loading />;
    }
    
    return(
        <div>{data === null ? "true" : "false"}</div>
    );
}

此时RosterViewer中的Suspense可保留（用于处理React.lazy的组件懒加载），但本地组件加载快可能仍看不到，不过数据加载阶段会正常显示Loading。

方案二：改用支持Suspense的数据获取方式（符合设计意图） #

如果想让Suspense处理数据加载状态，需要让数据获取在渲染阶段抛出Promise，React 18+可使用use hook实现：

1. 确保React版本≥18.2，修改useRosterViewer.js：

import { use } from "react";
import FetchAPI from "./FetchAPI";

export function useRosterViewer() {
    const fetchAPI = new FetchAPI();
    // use hook会等待Promise完成，未完成时让组件挂起
    const response = use(fetchAPI.fetch(null,"get","https://data.etabus.gov.hk/v1/transport/kmb/stop"));
    
    return {
        data: response.data,
        error: null
    };
}

2. 修改RosterTable.js（无需再判断data是否为null）：

import { useRosterViewer } from "./useRosterViewer";
import handleAPIError from "../components/common/handleAPIError";

export default function RosterTable(){
    try {
        const { data } = useRosterViewer();
        return(
            <div>{data === null ? "true" : "false"}</div>
        );
    } catch (error) {
        return handleAPIError(error);
    }
}

此时数据加载时组件会抛出Promise，触发Suspense的fallback显示Loading，直到请求完成。

补充测试提示 #

若要测试React.lazy的Suspense效果，可在Chrome开发者工具中开启慢速网络（Network→Throttling→Slow 3G），模拟组件chunk的网络加载延迟，即可看到Loading组件。

内容的提问来源于stack exchange，提问作者The KNVB