React Native useContext 错误：元素类型无效

问题描述

我正在一个新的 React Native 项目上设置用户身份验证框架以解决错误。我有 2 个从 App.js 调用的导航堆栈。似乎一旦我将这些包装在 <AuthContext.Provider> 中，我就会收到以下错误。如果我删除 <AuthContext.Provider>，屏幕可以正常工作而不会出错。 我一直在查看我可以在 useContext 挂钩上找到的所有文档，将其与我的代码相匹配，但我无法确定我做错了什么。 错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function
(for composite components) but got: undefined. You likely forgot to export your component from the file 
it's defined in,or you might have mixed up default and named imports.

Check the render method of `App`.

This error is located at:
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

App.js

import 'react-native-gesture-handler';
import React,{useState,useEffect} from 'react';
import AuthStack from './navigators/AuthStack';
import Profilestack from './navigators/Profilestack';
import {NavigationContainer} from '@react-navigation/native';
import {AuthContext} from './components/AuthenticationContext';

const App: () => React$Node = () => {
  const [isLoading,setIsLoading] = useState(true);
  const [userToken,setUserToken] = useState('');

  const auth = {
    signIn: () => {
      setUserToken('sdf');
      setIsLoading(false);
    },signOut: () => {
      setUserToken('');
      setIsLoading(false);
    },signUp: () => {
      setUserToken('sdf');
      setIsLoading(false);
    },};

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    },500);
  },[]);

  return (
    <AuthContext.provider value={auth}>
      <NavigationContainer>
        {userToken !== '' ? <Profilestack /> : <AuthStack />}
      </NavigationContainer>
    </AuthContext.provider>
  );
};

export default App;

AuthenticationContext.js

import {createContext} from 'react';

export const AuthContext = createContext();

登录.js

import React from 'react';
import {
  StyleSheet,View,Text,Button,TextInput,imagebackground,} from 'react-native';
import {AuthContext} from '../components/AuthenticationContext';

function Login() {
  const {signIn} = React.useContext(AuthContext);

  return (
    <>
      <View style={styles.container}>
        <imagebackground
          source={require('../assets/images/scrybe_hero_bg.jpg')}
          style={styles.image}>
          <View style={styles.body}>
            <Text style={styles.sectionTitle}>Welcome To My App</Text>
            <View style={styles.inputContainer}>
              <TextInput style={styles.input} placeholder={'Email'} />
              <TextInput style={styles.input} placeholder={'Password'} />
              <View style={styles.buttonContainer}>
                <Button title="Sign In" onPress={signIn()} />
                <Button title="Create Account" />
              </View>
            </View>
          </View>
        </imagebackground>
      </View>
    </>
  );
}

export default Login;

Home.js 和 Signup.js 与 Login.js 相对相同，所以我认为没有必要包含这些代码，但如果有帮助的话可以。 AuthStack.js 和 Profilestack.js 也是如此。

TIA

解决方法

您试图在应该是 AuthContext.provider 时呈现 AuthContext.Provider :)