Skip to content
文档
传入参数

参数

默认情况下,key 将作为参数传递给 fetcher。所以下面这 3 个表达式是等价的:

useSWR('/api/user', () => fetcher('/api/user'))
useSWR('/api/user', url => fetcher(url))
useSWR('/api/user', fetcher)

多个参数

在某些场景中,向 fetcher 函数传递多个参数(可以是任何值或对象)非常有用。例如授权请求:

useSWR('/api/user', url => fetchWithToken(url, token))

这是 错误的。 因为数据的标识符(也是缓存 key)是 '/api/user',所以即使 token 变了,SWR 仍然会使用相同的 key 并返回错误的数据。

相反,你可以使用一个 数组 作为参数 key,它包含 fetcher 的多个参数:

const { data: user } = useSWR(['/api/user', token], ([url, token]) => fetchWithToken(url, token))

fetcher 函数会按原样接受 key 参数,并且缓存 key 也将与整个 key 参数相关联。在上面的例子中,urltoken 都与缓存 key 相关联。

⚠️

在之前的版本 (< 2.0.0) 中,当 key 参数是数组类型时,fetcher 函数将以展开参数的形式接收到原始 key。例如,key [url, token] 会变成 fetcher 函数的两个参数 (url, token)

传入对象

💡

从 SWR 1.1.0 开始,object 类型的 keys 可以在内部自动被序列化。

假设你还有另一个使用用户范围来请求数据的函数:fetchWithUser(api, user)。你可以执行以下操作:

const { data: user } = useSWR(['/api/user', token], fetchWithToken)
 
// ...然后将其作为参数传递给另一个 useSWR hook
const { data: orders } = useSWR(user ? ['/api/orders', user] : null, fetchWithUser)

你可以直接传递一个对象作为 key,fetcher 也会接收该对象:

const { data: orders } = useSWR({ url: '/api/orders', args: user }, fetcher)
⚠️

在旧版本(< 1.1.0)中,SWR 会比较每次渲染时的参数,如果其中任何一个发生了变化,就会触发重新验证。