分类导航

程序问答发布时间：2022-05-31 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了useContext 错误：无效的钩子调用。 Hooks 只能在函数组件内部调用，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决useContext 错误：无效的钩子调用。 Hooks 只能在函数组件内部调用？

开发过程中遇到useContext 错误：无效的钩子调用。 Hooks 只能在函数组件内部调用的问题如何解决？下面主要结合日常开发的经验，给出你关于useContext 错误：无效的钩子调用。 Hooks 只能在函数组件内部调用的解决方法建议，希望对你解决useContext 错误：无效的钩子调用。 Hooks 只能在函数组件内部调用有所启发或帮助；

我正在尝试在 React Native Expo 应用程序中使用 Firebase 实现身份验证，但收到指向 useContext 的错误，我在我的 Routes.Js 文件中使用了该错误：

import React,{ useContext,useEffect,useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import * as firebase from 'firebase';

import AuthStack from './AuthStack';
import MainTab from './MainTab';
import { AuthUserContext } from './AuthUserProvIDer';
import LoadingScreen from '../screens/LoadingScreen';

export default function Routes() {
    const [isLoading,setIsLoading] = useState(true);
    const { user,setUser } = useContext(AuthUserContext);

    useEffect(() => {
        const unsubscribeAuth = firebase.auth().onAuthStateChanged(async authUser => {
            try {
                await (authUser ? setUser(authUser) : setUser(null));
                setIsLoading(false);
            } catch (error) {
                console.log(error);
            }
        });
        return unsubscribeAuth;
    },[]);

    if (isLoading) {
        return <LoadingScreen />;
    }

    return (
        <NavigationContainer>
            {user ? <MainTab /> : <AuthStack />}
        </NavigationContainer>
    );
}

我在单独的文件 AuthUserContext 中创建 AuthUserProvIDer.Js：

import React,{ useState,createContext } from 'react';

export const AuthUserContext = createContext({});

export const AuthUserProvIDer = ({ children }) => {
  const [user,setUser] = useState(null);

  return (
    <AuthUserContext.ProvIDer value={{ user,setUser }}>
      {Children}
    </AuthUserContext.ProvIDer>
  );
};

然后我将其用作 App.Js 文件中的提供程序：

export default function AppWrapper() {
  const [FontLoaded,setFontLoaded] = useState(false);

  if (!FontLoaded) {
    return (
      <AppLoading 
        startAsync={fetchFonts} 
        onFinish={() => setFontLoaded(true)} 
      />
    );
  }

  const rootReducer = combineReducers({
    cart: cartReducer,history: historyReducer
  });
  
  const store = createStore(rootReducer,applymIDdleware(ReduxThunk));

  return (
    <ProvIDer store={storE}>
      <AuthUserProvIDer>
        <Routes />
      </AuthUserProvIDer>
    </ProvIDer>
  );
}