如何使用带有SWR挂钩的高速缓存中存储的数据，以及如何使SWR仅获取一次

问题描述

由于有useEffect挂钩，我有一个可以在安装时获取数据的组件。我希望它不重新装载数据，而是在我重新导航到该组件时使用useSwr钩子提供的“缓存”数据。林不知道如何做到这一点。我读到的是可以这样叫swr：

const { data } = useSwr('same route as prevIoUs one')

它会为您提供上一个swr调用存储在缓存中的数据。

const CategoryList = ({setLoading}) => {

    const [category,setCategory] = useState('');
    const [mounted,setMounted] = useState(false);
    const [parameters,setParameters] = useState({});
    const company_id = localStorage.getItem('company_id')

    const session = new SessionService();
    const { dataFromFetch,error } = useSWR([mounted ? `${session.domain}/company/${company_id}/category-stats` : null,parameters ],url =>
      session.fetch(url,{
          method: 'GET',}),{
          onSuccess: (dataFromFetch) => {
            setCategory(dataFromFetch)
            setLoading(false)
            setMounted(false)
          },onError: (err,key,config) => {
            console.log("error",err)
          }
      }
  )

  useEffect(() => {
    setMounted(true)
    setLoading(true)
  },[])

    return (
        <div className={classes.CategoryList}>
            <h5>Parc de véhicules</h5>
            <div className={classes.CategoriesCards}>
            {category.data? category.data.map((element,index) => {
                return <CategoryItem
                            category={element.data.name}
                            carNumber={element.stats.nb_vehicles}
                            locating={element.stats.nb_booked}
                            available={element.stats.nb_available}
                            blocked={element.stats.nb_unavailable}
                            percentage={(element.stats.nb_booked / element.stats.nb_vehicles * 100).toFixed(2)}
                            key={index}
                        />
            }): null}
            </div>
        </div>
    )
}

export default CategoryList;

另外，从另一方面来说，我希望我的SWR钩子不要始终如一地实际那样试图重新获取数据。我试过的是在fetcher函数之后传递选项，就像这篇帖子SWR options explanation中所规定的那样。实际上，我的组件尝试每5-10秒重新获取数据，尽管由于我的“挂载”条件导致“空”路由（根据文档，这是推荐的方式），但未能成功。它仍然会发送一个带有响应404的请求，我想避免这种情况。

const [parameters,setParameters] = useState({
      revalidateOnFocus: false,revalidateOnMount:false,revalidateOnReconnect: false,refreshWhenOffline: false,refreshWhenHidden: false,refreshInterval: 0
    });
    const company_id = localStorage.getItem('company_id')

    const session = new SessionService();
    const { dataFromFetch,err)
          }
      }
  )

解决方法

根据SWR的文档，该钩子的API是

const { data,error,isValidating,mutate } = useSWR(key,fetcher,options)

在您的代码中，您应该在第一个参数中将选项作为数组的一部分传递，而第三个参数应该是第三个参数。

次要重构说明了如何解决：

const parameters = {
  revalidateOnFocus: false,revalidateOnMount: false,revalidateOnReconnect: false,refreshWhenOffline: false,refreshWhenHidden: false,refreshInterval: 0,};

const company_id = localStorage.getItem( "company_id" );

const session = new SessionService();

const fetcher = (url) =>
  session.fetch(url,{
    method: "GET",});

const key = mounted
  ? `${session.domain}/company/${company_id}/category-stats`
  : null;

const { data,error } = useSWR(key,parameters );

您还使代码过于复杂了-不需要onSuccess或onError处理程序-您只需使用返回的值data和{{1} }。

此外，无需使用error将获取的数据保存到状态。只需直接从setCategory阅读。这就是SWR的好处?当获取数据时，它将自动神奇地触发重新渲染。