Question

我想设置一个自定义钩子来使用 React Query 获取数据，以便轻松模拟测试的返回值。

这是我的 useFetchHook 自定义钩子。

export const useFetchData = (idQuery) => {
  const delay = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve();
      }, 500);
    });
  };

  const handleRickAndMortyFetch = () => {
    return delay()
      .then(() => axios(`https://rickandmortyapi.com/api/character/${idQuery}`))
      .then((res) => res.data);
  };

  const { data, error, isLoading } = useQuery(
    ["rickandmorty", idQuery],
    handleRickAndMortyFetch,
    {
      cacheTime: 1000 * 60 * 60 * 24,
      enabled: false || idQuery !== 0,
      onError: (error) => console.log(error),
      retry: false,
      refetchOnWindowFocus: true,
      staleTime: 1000 * 60 * 60 * 24,
      useErrorBoundary: true
    }
  );

  return { data, error, isLoading };
};

但是，我收到一个 TypeError (0 , _useFetchData2.default) is not a function，它指向 <Home/> 中的这行代码。

const { data, error, isLoading } = useFetchData(idQuery);

这些是我解决问题的尝试

尝试不同的导出方法。 export default function useFetchData(idQuery) 或 export const useFetchData = (idQuery) => {}
确保自定义挂钩返回值 return { data, error, isLoading }
确保调用自定义钩子并传递参数。 useFetchData(idQuery)
将 useFetchHook 分解为对象，因为它返回一个对象。
useFetchHook里面是return { data, error, isLoading };
<Home/>里面是const { data, error, isLoading } = useFetchData(idQuery);
React 版本是 17.0

请指教如何解决。

Answer 1

因为您“命名导出”useFetchData 而不是默认导出所以更改为

import useFetchData from "../../hooks/useFetchData";

在 Home.jsx 中

import { useFetchData } from "../../hooks/useFetchData";

或将 export const useFetchData 改为 export default useFetchData

如何解决 React 自定义钩子 TypeError (0 , _ .default) is not a function？

1 个答案: