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

Question

我想为使用 React Query 获取数据设置自定义挂钩，以便轻松模拟 return 值进行测试。

这是我的 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) => {}
确保自定义挂钩 returning 值 return { data, error, isLoading }
确保调用自定义挂钩并传递参数。 useFetchData(idQuery)
解构 useFetchHook 作为对象，因为它是 return 对象。
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？

How to solve React custom hook TypeError (0 , _ .default) is not a function?

reactjs

react-hooks

react-query