在useEffect中使用自定义挂钩

Question

我正试图使用自定义Axios挂钩来获取一些数据，但我收到一个错误，上面写着"无效挂钩调用"。钩子只能在函数组件的内部调用我知道这听起来很明显，但对一个新手来说，这并没有多大意义。

钩子在这里：

import { useState } from "react";
import axios from "axios";
export default useApi = () => {
const [data, setData] = useState([]);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const request = async () => {
const source = axios.CancelToken.source();
setLoading(true);
try {
const response = await axios.get(url, { cancelToken: source.token });
setData(response.data);
setLoading(false);
} catch (error) {
if (axios.isCancel(error)) {
// don't update state in case component is dismounting
console.log("cancelled");
} else {
setLoading(false);
setError(error);
}
}
return () => {
source.cancel();
};
};
return { data, error, loading, request };
};

我希望能够像返回一样使用数据、错误、加载和请求，所以我尝试使用析构函数。

import React, { useEffect } from "react";
import useApi from "../hooks/http-hook";
const { request, data, error, loading } = useApi();

const SomeComponent = (props) => {
useEffect(() => {
const getUsers = async () => {
try {
const res = await request("http://localhost:8000/api/users");
console.log(res);
} catch (err) {
console.log(err);
}
};
getUsers();
}, [request]);
}
export default SomeComponent;

Answer 1

您必须在组件内部使用钩子。

我看到你试图在导入后面调用它，我想它在任何类型的组件之外。试试之类的东西

import useApi from "../hooks/http-hook";
const YourComponent = () => {
const { request, data, error, loading } = useApi();
console.log(request, data, error, loading);
return <Stuff/>
}