卸载组件时，useSWR和mutate的行为不符合预期

问题描述

关于mutate（key），我遇到了一些意外行为的问题。在我的数据获取代码中，我具有以下钩子/函数：

const recentOptions = {
    refreshInterval: 0,revalidateOnFocus: false,dedupingInterval: 180000000    //or 500
}

export const useRecent = () => {
    const {data,error} = useSWR(
        `${config.apiUrl}/GetRecentFoundations`,getThenResolve,recentOptions
    );

    return {
        recent: data,isLoading: !error && !data,isError: error
    };
}

export const setRecent = async(fid) => {
    await postThenResolve(
        `${config.apiUrl}/SetFoundationRecent`,{fid});

    //Todo: So the behavior I am seeing tends to indicate that
    //mutate(key) sends out a message to swr to refetch,but doesn't
    //necessarily cause the cache to be invalidated.
    //This means that mutate will cause any CURRENTLY MOUNTED useSWR()
    //to refetch and re-render,but ones that aren't mounted will
    //return with stale data.
    mutate(`${config.apiUrl}/GetRecentFoundations`);
}

我还有一个使用useRecent（）获取数据的组件：

const FoundationRecents = props => {
    const {recent,isLoading} = useRecent();

    if(isLoading) return <div>...LOADING...</div>;
    if(!recent) return null;

    return <SimpleCard
        titlebg={colors.blue}
        titlefg={colors.white}
        titlesz='small'
        title='Recent'
        contentbg={colors.white}
        component={<FoundationRecentsView recent={recent}/>}
    />
}

我目前在两个地方使用此模式，其中一个发生setRecent()时要在其上安装组件。另一个，用于卸载组件的位置。安装组件后，一切正常。调用mutate()时，所有内容似乎都重新提取并重新呈现。

但是，如果在卸载组件时调用setRecent（），然后又返回它，则会得到陈旧的数据，并且不会进行重新提取。

我认为我一定误会了mutate(key)的作用，或者也许我不清楚dedupingInterval是什么。我认为，即使重复数据删除间隔较长，该突变也会导致GetRecentFoundations缓存无效，因此，对useSWR()的下一次调用将需要重新验证。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）