React Suspense 数据加载失败时怎么提供重试入口

React Suspense 的加载失败不能只靠 fallback 解决：fallback 负责 Promise 仍在 pending 时的等待态，Promise reject 后要交给最近的 Error Boundary。要让“再试一次”真正生效，按钮点击时必须创建新的 Promise，并用这个新引用触发错误边界重置。

先把加载态和失败态分开

当 Suspense-enabled 数据源返回的 Promise 还没有完成，子树会暂时挂起，Suspense 显示 fallback。如果这个 Promise 后来 reject，错误会继续向上冒泡，由 Error Boundary 渲染失败提示。因此加载骨架和失败卡片应该分开写：前者告诉用户“还在取”，后者提供原因和重试入口。

这也解释了一个常见误区：把读取 Promise 放进普通事件处理或 Effect，并不会自动让 Suspense 接管。本文示例假定 readAlbums 是框架或数据层提供的 Suspense 读取函数，组件只消费它。

把当前 Promise 放进可替换的状态

可重试的最小结构是让页面保存“当前这一次请求”的 Promise。首次渲染读取初始 Promise；失败后，按钮创建下一次请求并替换状态。下面的代码用 use 读取缓存 Promise，重点是状态中的值代表请求实例，而不是一份已经解析的数据。

import { Suspense, startTransition, use, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { readAlbums, refetchAlbums } from './album-data.js';

function AlbumList({ promise }) {
  // use 会在 pending 时挂起，在 reject 时交给 Error Boundary。
  const albums = use(promise);
  return 
{albums.map(item => 
{item.title}
)}
;
}

export default function AlbumsPanel() {
  // 初始值只创建一次，避免每次渲染产生新的 Promise。
  const [albumsPromise, setAlbumsPromise] = useState(() => readAlbums('/albums'));

  function retry() {
    // 非紧急更新避免已显示内容瞬间被 loading 替换。
    startTransition(() => setAlbumsPromise(refetchAlbums('/albums')));
  }

  return (
     (
        

          
专辑加载失败，请稍后重试。
          Try again
        
      )}
    >
      正在加载专辑…}>
        
  );
}

这里的 resetKeys 不是重试请求本身，它只是告诉错误边界：关键输入变了，可以重新尝试子树。真正发请求的是 refetchAlbums。如果只把错误提示放在 Error Boundary 里，却没有替换 Promise，按钮即使触发了重渲染，也仍会读到原来的失败结果。

重试时必须替换 Promise 引用

把失败流程压缩成一条判断链更容易排查：旧 Promise reject 后进入错误态；点击按钮创建新 Promise；新引用进入 resetKeys；边界重新渲染，子组件再次读取它；pending 时显示 Suspense loading，成功后回到列表。重试的核心是“换请求实例”，不是“重复 set 一个旧值”。

若希望重试期间保留已展示的旧内容，可以像示例一样把状态更新放入 startTransition。它不能消除错误，也不能替代 Error Boundary，只是把这次更新标成非紧急，减少界面突然闪到全屏 loading 的感觉。

线上排查看这张清单

不要在 use(promise) 外面套普通 try/catch 来接住 Suspense 错误；React 的读取机制需要由 Suspense 和 Error Boundary 协作。也不要把网络错误文案写成“系统一定会自动恢复”，持续失败时应保留可读提示和再次操作入口。

相关问题

Suspense 的 fallback 能捕获接口 500 吗？

不能把它当作错误提示。fallback 对应的是等待中的 Promise；请求 reject 后应由 Error Boundary 展示失败态。

为什么重试按钮需要 resetKeys？

它让错误边界知道用于渲染子树的关键输入已变化，从失败态回到重新尝试的路径；实际请求仍由新的 Promise 完成。

可以在组件函数里直接写 fetch 吗？

不建议。每次 render 都创建新 Promise 会造成重复挂起，应该使用缓存、Suspense-enabled 框架或稳定的数据资源层。