我在 Next js 应用程序中创建一个自定义挂钩，以使用 axios 发送请求。这是我的
useApiRequestimport { ErrorResponse, SuccessResponse } from "@/types/api";
import axios, { AxiosResponse } from "axios";
import { useState } from "react";
const useApiRequest = <T>(
httpMethod: string,
url: string,
data?: any
): [boolean, T | string, string] => {
const [response, setResponse] = useState<[boolean, T | string, string]>([
false,
"",
"",
]);
const fetchData = async () => {
try {
const apiResponse: AxiosResponse<SuccessResponse<T> | ErrorResponse> =
await axios({
method: httpMethod,
url: url,
data: data,
});
if ("result" in apiResponse.data && "message" in apiResponse.data) {
const successData: SuccessResponse<T> = apiResponse.data;
setResponse([true, successData.result, successData.message]);
} else {
const errorData: ErrorResponse = apiResponse.data;
setResponse([false, errorData.error, errorData.error]);
}
} catch (error) {
if (error instanceof Error) {
setResponse([false, "", error.message]);
} else {
setResponse([false, "", "Terjadi kesalahan"]);
}
}
};
fetchData();
return response;
};
export default useApiRequest;
我在我的页面之一中使用该钩子，如下所示
import Button from "@/components/elements/buttons/Button";
import useApiRequest from "@/hooks/useApiRequest";
import Head from "next/head";
const JadwalPage = () => {
const handleLogin = () => {
const [isSuccess, responseData, message] = useApiRequest(
"post",
"/auth/login",
{
username: "admin",
password: "pratama-putra",
}
);
if (isSuccess) {
console.log("Data berhasil diperoleh:", responseData);
} else {
console.error("Gagal melakukan permintaan:", message);
}
};
return (
<div className="min-h-screen">
<Head>
<title>Jadwal Karyawan</title>
</Head>
<Button onClick={handleLogin}>Click me</Button>
</div>
);
};
export default JadwalPage;
为什么我总是收到错误
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.我尝试将 useApiRequest 从 lambda 函数更改为常规函数，但它仍然产生相同的错误
不要从常规 JavaScript 函数中调用 Hooks。相反，您可以：
✅ 从 React 函数组件调用 Hooks。 ✅ 从自定义调用 Hooks 挂钩