组件卸载时useSWR()与mutate()行为不符合预期问题排查

你遇到的问题核心是SWR的mutate行为与dedupingInterval的交互逻辑，咱们一步步拆解原因并给出解决方案：

问题根源分析 #

当组件处于卸载状态时调用mutate(key)，SWR的内部逻辑是这样的：

• 由于没有活跃的useSWR订阅（组件已卸载，没有钩子在监听这个key），SWR只会把对应key的缓存标记为stale（过期），但不会立即发起新请求更新缓存。
• 当你后续回到该组件，调用useSWR时，它会检查dedupingInterval：如果当前时间距离上次成功请求的时间还没超过你设置的180000000毫秒（50小时），SWR会直接复用这份stale的缓存，不会触发重新验证——这就是你看到"陈旧数据"的原因。

而组件挂载时调用mutate正常，是因为此时有活跃的订阅，SWR会立即触发重新请求，同时更新缓存和组件渲染。

解决方案 #

你需要让mutate在没有活跃订阅时也强制更新缓存，而不是只标记为stale。只需要给mutate加上第二个参数true即可：

修改你的setRecent函数：

export const setRecent = async(fid) => {
  await postThenResolve(
    `${config.apiUrl}/SetFoundationRecent`,
    {fid});
  // 第二个参数设为true，强制触发重新请求并更新缓存，无论是否有活跃订阅
  mutate(`${config.apiUrl}/GetRecentFoundations`, true);
}

为什么这个改动有效？ #

mutate(key, true)是SWR的简写语法，作用是：

1. 立即将对应key的缓存标记为stale
2. 强制发起新请求获取最新数据
3. 请求成功后更新缓存，后续组件挂载时就能直接拿到最新数据，不会因为dedupingInterval而复用旧缓存

如果需要更精细的控制，也可以手动调用fetcher并传递结果：

mutate(`${config.apiUrl}/GetRecentFoundations`, await getThenResolve(`${config.apiUrl}/GetRecentFoundations`));

不过mutate(key, true)已经足够解决你的场景，写法更简洁。

补充：关于dedupingInterval #

dedupingInterval的作用是在指定时间内，相同key的重复请求会被合并（去重），避免不必要的重复网络请求。它本身不会阻止stale缓存的重新验证，除非你同时设置了revalidateOnMount: false。但在你的场景里，组件卸载时mutate只标记了缓存为stale，后续回到组件时还在deduping窗口内，所以SWR认为不需要重新请求——这就是问题的关键。

内容的提问来源于stack exchange，提问作者Chris Magoun