Skip to content

Suspense

🚨

目前 Suspense 是 React 的一个 实验 特性。这些 API 可能会有重大改变,并且在成为 React 一部分之前不会有任何警告。
了解更多

💡

注意:SSR 模式还不支持 React Suspense。

你可以启用 suspense 选项,从而让 SWR 和 React Suspense 一起使用:

import { Suspense } from 'react'
import useSWR from 'swr'
function Profile () {
const { data } = useSWR('/api/user', fetcher, { suspense: true })
return <div>hello, {data.name}</div>
}
function App () {
return (
<Suspense fallback={<div>loading...</div>}>
<Profile/>
</Suspense>
)
}
💡

请注意,SWR 的 suspense 选项并不支持在渲染过程中发生改变。

在 Suspense 模式下,data 总是请求响应(因此你无需检查它是否是 undefined)。但如果发生错误,则需要使用 错误边界 来捕获它:

<ErrorBoundary fallback={<h2>Could not fetch posts.</h2>}>
<Suspense fallback={<h1>Loading posts...</h1>}>
<Profile />
</Suspense>
</ErrorBoundary>

注意:使用条件请求

通常,当启用 suspense 时,可以确保 data 在渲染时始终是准备就绪的:

function Profile () {
const { data } = useSWR('/api/user', fetcher, { suspense: true })
// `data` 永远不会是 `undefined`
// ...
}

但是,当它与条件请求或依赖请求一起使用时,如果请求被暂停data 将会是 undefined

function Profile () {
const { data } = useSWR(isReady ? '/api/user' : null, fetcher, { suspense: true })
// 如果 `isReady` 是 false,`data` 将会是 `undefined`
// ...
}

如果你想阅读有关该限制的更多技术细节,请查看这里的讨论