网络日志

SWR缓存中删除指定的Key

我们在使用React进行前端项目开发时经常会使用到SWR作为请求工具以及处理一部分的状态管理。SWR在接受的数据请求时会对比本地的useContext中是否缓存了对应的Key如果没有缓存的话才会请求,在管理系统中请求回来的数据经常伴随着增删改。此时如果我们不对之前请求的缓存进行清除也不对网站进行刷新那么在第二次进入页面时可能会因为缓存数据而出现一些BUG,所以我们通常在对数据进行修改后会对指定的Key进行删除,下次再使用时可以重新请求新数据。

参考:SWR Cache

SWR再useSWRConfig中导出了cache对象:


我们可以再useSWRConfig中导出cache后使用delete函数对缓存进行删除或者修改(set)

  let { cache } = useSWRConfig();
  function onFinish(values: any) {
    let { poster_file_name, url, indexes, position } = values;
    axios.put(`/advertisement/${id}`, { poster_file_name, url, indexes, position }).then(res => {
      if (res.data.success) {
        message.success(res.data.message);
        mutate();
        cache.delete("/advertisement/list");
      } else {
        message.error(res.data.message);
      }
    });
  }