跳至内容
文档
参数

参数

默认情况下,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))

这是错误的。因为数据的标识符(也是缓存键)是 '/api/user',即使 token 发生更改,SWR 仍然会使用相同的键并返回错误的数据。

相反,您可以使用数组作为 key 参数,其中包含 fetcher 的多个参数

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

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

⚠️

在以前的版本(< 2.0.0)中,当 key 参数为数组类型时,fetcher 函数将接收来自原始 key 的展开参数。例如,key [url, token] 将变成 fetcher 函数的 2 个参数 (url, token)

传递对象

💡

从 SWR 1.1.0 开始,对象键会在后台自动序列化。

假设您有另一个函数可以使用用户范围获取数据:fetchWithUser(api, user)。您可以执行以下操作

const { data: user } = useSWR(['/api/user', token], fetchWithToken)
 
// ...and then pass it as an argument to another useSWR hook
const { data: orders } = useSWR(user ? ['/api/orders', user] : null, fetchWithUser)

您可以直接传递对象作为键,并且 fetcher 也将接收该对象

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

在较旧的版本(< 1.1.0)中,SWR 会在每次渲染时浅比较参数,如果任何参数发生更改,则会触发重新验证。