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

Question

我的应用程序运行良好，但突然出现此错误。

错误：挂钩调用无效。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：

您的 React 和渲染器版本可能不匹配（例如 React DOM）
您可能违反了 Hooks 规则

您可能在同一个应用程序中有多个 React 副本有关如何调试和修复此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。

 import { useContext } from "react";
 import jwtDecode from "jwt-decode";

 import AuthContext from "./context";
 import authStorage from "./storage";

 const useAuth = () => {
   const { user, setUser } = useContext(AuthContext);

   const logIn = (authToken) => {
     const user = jwtDecode(authToken);
     setUser(user);
     authStorage.storeToken(authToken);
   };

   const logOut = () => {
     setUser(null);
     authStorage.removeToken();
   };

   return { user, logIn, logOut };
 };

 export default useAuth;

Answer 1

一切看起来都很好。除了可能实际上导入 React

import React, { useContext } from "react";

我知道 React 17 中的 React 不需要这个，但是 React Native 没有官方声明说他们使用不需要 import 语句的新 JSX 编译器

同时检查您导入的 AuthContext 文件

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

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

javascript

react-native

react-hooks

use-context