React Suspense 为什么不能直接在普通组件里用？

シ怡瑶提问于 2026-03-12 20:59:21 阅读 2

框架

我看到文档说 Suspense 可以配合 lazy 做代码分割，但我想在普通异步数据请求里用它来显示 loading，结果一用就报错。是我用法不对吗？

比如下面这样写，页面直接白屏了，控制台提示“Cannot read property ‘then’ of undefined”：

import { Suspense } from 'react';

function MyComponent() {
  const data = fetchData(); // 这是个普通 async 函数
  return <div>{data.name}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

Suspense 性能优化组件设计

我来解答赞 2 收藏

反馈

1 条解答

开发者爱华 Lv1

Suspense 只能捕获通过 React.lazy() 加载的组件，或者主动 throw 出来的 Promise。你那个普通 async 函数它根本不管。

想用 Suspense 玩数据加载，得这么写：

// 搞个会"抛 Promise"的组件

function DataComponent() {

  const data = use fetchData(); // 你得用支持 Suspense 的数据请求库，比如 experimental 的 use

  return {data.name}
;

}



// 或者最省事的懒人方案——直接用 React.lazy 做代码分割

const DataComponent = React.lazy(() => import('./DataComponent'));



function App() {

  return (

    <Suspense fallback={<div>Loading...</div>}>

      <DataComponent />

    </Suspense>

  );

}

如果你只是想做个异步请求的 loading 状态，老老实实写个 loading 状态管理吧，别折腾 Suspense 了，这货现在还不是给你干这个用的。

2026-03-12 21:08