调用useMemo而不改变依赖关系。

Question

我正在使用React 17，并试图移动一些redux数据来响应查询。

redux中的一个常见功能是对api数据进行按摩，并将其存储给所有使用者。

我试图通过react查询复制相同的功能。如果api调用第一次成功，我想按摩api返回的数据，并将其保存在useMemo中。

function massageCategoriesData(data){
// ...some computation here...
}

const useDataCategories = () => {
  const query = useQuery(
    ['categories'],
    () => api.fetchCategories(),
    { staleTime: Infinity, cacheTime: Infinity },
  );

  const { data, isSuccess } = query;

  const finalData = useMemo(() => {
    if (isSuccess) {
      return massageCategoriesData(data);
    }
    return null;
  }, [query.isSuccess]);

  return {
    query,
    data: finalData,
  };
};

但问题是，当我从一次又一次卸载和挂载的组件中调用useDataCategories时，每次都会发生按摩，而useMemo不起作用。

我试着阅读官方文件，他们是这么说的：

​

请帮帮我！useMemo的行为也依赖于其他事物吗？

Answer 1

您可能希望在queryFn本身内这样做：

const useDataCategories = () => {
  const query = useQuery(
    ['categories'],
    async () => {
      const data = await api.fetchCategories()
      return massageCategoriesData(data)
    }
    { staleTime: Infinity, cacheTime: Infinity },
  );

我在这里详细介绍了不同的方法及其权衡：https://tkdodo.eu/blog/react-query-data-transformations