React钩子有一条规则：它们只能在组件内部调用。
我想把我所有的url放在一个文件中。我需要调用AuthToken方法来返回令牌。
当我调用AuthToken时，里面有useSelector钩子，它会给我这个错误：
"无效的挂钩调用。钩子只能在函数组件的主体内部调用">
useSelector在函数中。我不明白我为什么会犯这个错误。我该怎么修？
这是我的代码：
import { useSelector } from "react-redux";
import React from "react";
const AuthToken = () => {
const token = useSelector((state: any) => state.facebookAuth.accessToken);
console.log("Token" + token);
return token;
};
const version: string = "v10.0";
const baseURL: string = "https://graph.facebook.com/";
const getUserPagesURL: string = `${baseURL}${version}/me/accounts?access_token=${AuthToken()}`;
export { getUserPagesURL };
您正在调用的函数不是组件。
例如，如果在Form组件中使用useSelector，它会起作用。
这行代码不在组件的主体内，因此它不能调用钩子：
const getUserPagesURL: string = `${baseURL}${version}/me/accounts?access_token=${AuthToken()}`;
你可以把它改成这样：
const version: string = "v10.0";
const baseURL: string = "https://graph.facebook.com/";
export const useUserPagesUrl = () => {
const token = useSelector((state: any) => state.facebookAuth.accessToken);
return `${baseURL}${version}/me/accounts?access_token=${token}`;
}
// To be used like:
const ExampleComponent = (props) => {
const url = useUserPagesUrl();
return (
<div>
{url}
</div>
);
}
参见：挂钩规则