React Native useContext Error: Element type is invalid

Question

我正在为新的 React Native 项目设置用户身份验证框架以解决错误。我从 App.js 调用了 2 个导航堆栈。似乎只要我将它们包装在 <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();

Login.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

Answer 1

您正在尝试渲染 AuthContext.provider 而它应该是 AuthContext.Provider :)

React Native useContext Error: Element type is invalid

React Native useContext Error: Element type is invalid

reactjs

react-native

react-hooks

use-context