reactjs - React：Hook 在函数组件的主体中给出错误

Question

我想把我所有的网址放在一个文件中。我需要调用 AuthToken 方法来返回令牌。

当我在内部有 useSelector 挂钩时调用 AuthToken 时，它给了我这个错误：

“无效的钩子调用。只能在函数组件的主体内部调用钩子。”

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 };

标签： reactjsreact-reduxreact-hooks

Answer 1

React 钩子有一个规则：它们只能在组件内部调用。

您调用它的函数不是组件。

例如，如果您在 Form 组件中使用 useSelector ，它将起作用。