reactJS中的无效钩子使用Auth0答案

【问题标题】：Invalid Hook in reactJS Using Auth0reactJS中的无效钩子使用Auth0
【发布时间】：2022-01-12 11:46:44
【问题描述】：

我有一个带有以下 const 函数的 app.js：

  const serverUrl = process.env.REACT_APP_SERVER_URL;
  const { getAccessTokenSilently } = useAuth0();
  const callEndpoint = async (props) => {
    const {endpoint} = props;
    const token = await getAccessTokenSilently();
    try {
        const token = await getAccessTokenSilently();
        console.log('endpoint is:', `${serverUrl}/${props.endpoint}`);
        const response = await fetch(
          `${serverUrl}/${props.endpoint}`,
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          }
        );
  
        const responseData = await response.json();
  
        console.log(responseData.message);
      } catch (error) {
        console.log(error.message);
      }
};

在渲染的更下方：

<Button variant="outline-primary"  onClick = { (e) => {callEndpoint({endpoint:"get_timestamp_public"})}} >Fetch Public Data</Button>

效果很好。

但是，当我尝试将端点移动到一个名为“api_funcs.js”的新 js 文件中时：


import React, { useEffect, useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';

const UseAPI = (props) => {
    const {endpoint} = props;
    const serverUrl = process.env.REACT_APP_SERVER_URL;
    console.log("I am in here");

    const { getAccessTokenSilently } = useAuth0();
    

    const callEndpoint = async () => {
        const token = await getAccessTokenSilently();
        try {
           // const token = await getAccessTokenSilently();
            const response = await fetch(
              `${serverUrl}/{props.endpoint}`,
              {
                headers: {
                  Authorization: `Bearer ${token}`,
                },
              }
            );
      
            const responseData = await response.json();
      
            //setMessage(responseData.message);
            console.log(responseData.message);
          } catch (error) {
            //setMessage(error.message);
            console.log(error.message);
          }
    };
    

}
export default UseAPI;

const { getAccessTokenSilently } = useAuth0(); 给我一个错误：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

我不明白——我的 UseAPI 不是函数组件吗？我错过了什么？

【问题讨论】：

标签： reactjs auth0

【解决方案1】：

因为您没有违反 Hooks 规则。

可能有两个常见原因导致您看到此错误：

您的 React 和 React DOM 版本可能不匹配。

您可能正在使用尚不支持 Hooks 的 react-dom ( 版本。你可以运行

> npm ls react-dom

在您的应用程序文件夹中检查您使用的版本。

您可能在同一个应用中拥有多个 React 副本。

为了让 Hooks 工作，您的应用程序代码中的 react 导入需要解析为与 react- 内部的 react 导入相同的模块dom 包。

如果这些反应导入解析为两个不同的导出对象，您将看到此警告。如果您不小心得到了两份 react 包，则可能会发生这种情况。

如果您使用 Node 进行包管理，您可以在您的项目文件夹中运行此签入：

npm ls react

如果您看到多个 React，您需要弄清楚为什么会发生这种情况并修复您的依赖关系树。例如，您使用的库可能错误地将 react 指定为依赖项（而不是对等依赖项）。在修复该库之前，Yarn resolutions 是一种可能的解决方法。

您也可以尝试通过添加一些日志并重新启动开发服务器来调试此问题：

// Add this in node_modules/react-dom/index.js window.React1 =
require('react');

// Add this in your component file require('react-dom'); window.React2
= require('react'); console.log(window.React1 === window.React2);

如果它打印 false 那么你可能有两个 React 并且需要弄清楚为什么会发生这种情况。 This issue 包含了社区遇到的一些常见原因。

当您使用 npm 链接或等效项时，也会出现此问题。在这种情况下，你的打包器可能会“看到”两个 React——一个在应用程序文件夹中，一个在你的库文件夹中。假设 myapp 和 mylib 是同级文件夹，一种可能的解决方法是从 mylib 运行 npm link ../myapp/node_modules/react 。这应该使库使用应用程序的 React 副本。

因此，运行命令

 npm link <path_to_local_library>/node_modules/react

可能会解决您的问题。

注意

一般来说，React 支持在一个页面上使用多个独立副本（例如，如果一个应用程序和一个第三方小部件都使用它）。只有当 require('react') 在组件和渲染它的 react-dom 副本之间解析不同时，它才会中断。

源 React 文档

【讨论】：