Reactjs 如何使用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的文档，钩子的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, fetcher, parameters );

您的代码也过于复杂了—不需要使用

onSuccess

或

onError

处理程序—您只需使用返回值

data

和

error

---

此外，无需使用

setCategory

将获取的数据保存到state。直接从

数据中读取即可。这就是SWR的好处，谢谢你的回答。不过，如果我决定再次使用成功挂钩来存储数据，那是因为在成功之外“数据”总是空的，我不知道为什么。我无法“读取”数据，它总是未定义的。。。任何解释？
数据
当然应该包括提取的数据。我很难诊断，因为我无法使用您的抓取程序或端点。一些建议：A）尝试删除
revalidateOnMount:true
，看看这是否会阻止提取。b） 
error
是否返回任何内容？c） 我不知道变量
mounted
是如何设置的-这会阻止提取吗？d） fetcher函数是否返回解析数据的承诺？尝试单独调试获取程序。
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, fetcher, parameters );