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], fetchWithToken)

fetchWithToken 函数仍然接受同样的2个参数,但现在缓存 key 也将与 token 相关联。

传入对象

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

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

现在请求的 key 是两个值的组合。SWR 在每次渲染时 比较参数,如果其中任何一个发生了变化,就会触发重新验证。
请记住,在渲染时不应该重新创建对象,因为每次渲染时它们将被视为不同的对象:

// 不要这样做!每次渲染时 Deps 都会变化。
useSWR(['/api/user', { id }], query)
// 相反,你应该只传递“稳定的”值。
useSWR(['/api/user', id], (url, id) => query(url, { id }))

Dan Abramov 在 这篇博客 中很好地解释了依赖关系。