注销应用清除Cache Storage时抛出错误，缓存已清除仍报错求助

错误根源 #

1. useEffect误用async回调：React的useEffect回调不能直接是async函数——async函数返回Promise，但useEffect要求返回清理函数或undefined，这会触发警告，甚至在组件卸载时引发内存泄漏类错误。
2. 注销函数的异步逻辑混乱：
   • caches.delete()是异步操作，用map遍历缓存列表时不会等待异步完成，可能导致路由跳转提前执行，引发状态异常。
   • router.push('/')放在map循环里会被多次调用（有多少个缓存key就执行多少次），完全没必要，还会导致路由跳转异常。

修复后的代码 #

修正缓存初始化的useEffect #

useEffect(() => {
  const initCache = async () => {
    await caches.open('my-cache');
  };
  initCache();
}, [token, user_id]);

这里把async函数放在useEffect内部执行，避免直接把async作为回调返回Promise，同时加上await确保缓存初始化完成，避免遗漏异步操作的状态。

修正注销函数 #

const logoutFunc = async () => {
  localStorage.clear();
  const cacheKeys = await caches.keys();
  // 等待所有缓存删除操作完成
  await Promise.all(cacheKeys.map(key => caches.delete(key)));
  // 所有清理完成后再跳转路由
  router.push('/');
};

用Promise.all批量处理异步的缓存删除操作，确保所有缓存都清理完成后再执行路由跳转，同时避免多次调用router.push。

内容的提问来源于stack exchange，提问作者Akila Shalini