参数
默认情况下,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
参数相关联。在上面的示例中,url
和 token
都与缓存键相关联。
⚠️
在以前的版本(< 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 会在每次渲染时浅比较参数,如果任何参数发生更改,则会触发重新验证。