React Suspense获取数据时fallback加载态未渲染问题

你的代码里Suspense永远不生效的核心原因是：Suspense不会自动检测useEffect、事件回调里发起的异步请求，它只会在子组件渲染阶段抛出未决议的Promise时，才会触发fallback渲染。
你当前实现的几个问题直接导致Suspense无法感知加载状态：

• 首次渲染时data初始值是空数组，子组件渲染全程没有抛出任何待决议的Promise，Suspense完全不知道有请求正在进行
• 你用传统的useEffect发起请求、useState存结果的模式，请求完成后是通过setState触发重渲染，整个流程和Suspense的触发逻辑完全不兼容
• 无论你把Suspense标签移动到DOM的哪个位置，只要子组件渲染时不抛出待决议Promise，fallback就不会显示

Suspense 加载态触发的唯一条件是：其包裹的子组件在渲染过程中抛出未决议的Promise。此时Suspense会接管渲染，显示fallback内容，等Promise决议完成后，再重新尝试渲染子组件内容。
它不会自动扫描全局的Promise状态，也无法感知effect、事件回调里的异步逻辑。

以下两种方案都可以正常触发Suspense fallback，可根据项目场景选择：

方案1：手动实现Suspense资源包装（无额外依赖） #

先写一个通用的Promise包装工具，把普通请求转换成Suspense可识别的资源对象：

// 包装普通Promise为Suspense兼容的资源
function wrapPromise(promise) {
  let status = 'pending';
  let result;
  const suspender = promise.then(
    (res) => {
      status = 'success';
      result = res;
    },
    (err) => {
      status = 'error';
      result = err;
    }
  );
  return {
    read() {
      if (status === 'pending') throw suspender;
      if (status === 'error') throw result;
      return result;
    }
  };
}

再改造你的业务代码，注意把请求触发时机移出useEffect，不要在组件渲染函数内部定义子组件：

import { useState, Suspense, FC } from 'react';
import { Link } from 'react-router-dom';

const URL_BASE = 'https://api.thedogapi.com/v1/images/search'
// 提前定义请求方法，不要放在组件内部
const fetchDogList = () => {
  const promise = httpService.request({
    url: `${URL_BASE}?limit=10`,
    method: 'get',
    headers: { 'x-api-key': 'some-key' }
  }).then(res => res.body)
  return wrapPromise(promise)
}

// DogImage移到父组件外部定义，避免每次渲染重挂载
const DogImage: FC<DogImageProps> = ({ url }) => {
  return (
    <img src={url} alt="I'am a doggo." className="mfone__dog-images" />
  )
}

// 拆分列表组件，在内部读取资源
const DogList = ({ resource }) => {
  // 读取数据时如果请求未完成，会抛出Promise触发Suspense fallback
  const data = resource.read()
  return (
    <div id="mfone__images-box">
      {data.map((element, index) => (
        <DogImage key={index} url={element.url} />
      ))}
    </div>
  )
}

export const MainFlow = () => {
  // 用state存资源对象，刷新时重新创建资源即可触发重新加载
  const [resource, setResource] = useState(() => fetchDogList())

  const handleRefresh = () => {
    setResource(fetchDogList())
  }

  return (
    <div id="mfone__dog-container">
      <Suspense fallback={<div>Loading...</div>}>
        <DogList resource={resource} />
      </Suspense>
      <div id="mfone__links-box">
        <Link to="/" className="mfone__dog-links">
          Back to Home page
        </Link>
        <button
          onClick={handleRefresh}
          className="mfone__dog-links"
        >
          More Doggos
        </button>
      </div>
    </div>
  )
}

方案2：使用支持Suspense的成熟请求库 #

如果不想手动维护包装逻辑，可直接使用内置Suspense适配的请求库（如SWR、React Query、Relay），只需要开启对应配置项即可。
以SWR为例，开启suspense模式后不需要手动包装Promise：

import useSWR from 'swr';

const DogList = () => {
  const { data } = useSWR(
    `${URL_BASE}?limit=10`,
    (url) => httpService.request({
      url,
      method: 'get',
      headers: { 'x-api-key': 'some-key' }
    }).then(res => res.body),
    { suspense: true } // 开启Suspense模式
  )
  return (
    <div id="mfone__images-box">
      {data.map((element, index) => (
        <DogImage key={index} url={element.url} />
      ))}
    </div>
  )
}

// 父组件直接套Suspense即可正常显示fallback

• React 18及以上版本才正式支持数据请求场景的Suspense能力，低版本React请勿在生产环境使用
• 不要在组件渲染函数内部定义子组件，否则每次父组件渲染都会导致子组件重新挂载，引发状态丢失、重复请求等问题
• Suspense的fallback会替换所有处于pending状态的子节点内容，直到所有子节点抛出的Promise都决议完成才会渲染真实内容

内容的提问来源于stack exchange，提问作者Jonatã da Fonseca Bossan