首页 > 解决方案 > React Native Render Error undefined is not an object(评估'_useContext.register')

问题描述

我的 useContext 看起来很有效,但是当我将屏幕更改为 SignUpScreen 时,它给了我这样的错误

渲染错误未定义不是一个对象(评估'_useContext.refister')

这是我的SignUpScreen.js

import React, { useContext, useState } from 'react';
import { View, Text, Button, StyleSheet, TouchableOpacity, Image } from 'react-native';
import FormInput from '../components/FormInput';
import FormButton from '../components/FormButton';
import FormRedButton from '../components/FormRedButton'
import { firebase } from '../firebase/Firebase'

import { AuthContext, AuthProvider } from "../database/AuthProvider";

const SignupScreen = ({ navigation }) => {
    const [email, setEmail] = useState();
    const [password, setPassword] = useState();
    const [confirmPassword, setConfirmPassword] = useState();

    const {register} = useContext(AuthContext);
    

    return (
        <View style={styles.container}>
            {/* <Image
                source={require('../Logo/Mahan2.jpg')}
                style={styles.logo}
            /> */}
            <Text style={styles.text}>Create an account</Text>
            {/* UserName */}
            <FormInput
                lableValue={email}
                onChangeText={(userEmail) => setEmail(userEmail)}
                placeholderText="Email"
                iconType="user"
                autoCapitalize="none"
                autoCorrect={false}
            />
            {/* Password */}
            <FormInput
                lableValue={password}
                onChangeText={(userPassword) => setPassword(userPassword)}
                placeholderText="Password"
                iconType="lock"
                secureTextEntry={true}
            />
            {/* Confirm Password */}
            <FormInput
                lableValue={confirmPassword}
                onChangeText={(userConfirmPassword) => setConfirmPassword(userConfirmPassword)}
                placeholderText="Confirm Password"
                iconType="lock"
                secureTextEntry={true}
            />

            <FormButton
                buttonTitle="Sign Up"
                onPress={() => alert("Sing Up")}
            />

            <FormRedButton
                buttonTitle="Back"
                onPress={() => navigation.navigate('Login')}
            />


        </View>
    )
}

export default SignupScreen;

const styles = StyleSheet.create({
    ......
})

这是我的AuthProvider.js


import React, { createContext, useState } from "react";
import auth from '@react-native-firebase/auth';

export const AuthContext = createContext();

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

    return(
        <AuthContext.Provider
            value={{
                user,
                setUser,
                login: async (email, password) => {
                    try{
                        await auth().signInWithEmailAndPassword(email, password);
                    } catch(e) {
                        console.log(e);
                    }
                },
                register: async (email, password) => {
                    try{
                        await auth().createUserWithEmailAndPassword(email, password);
                    } catch(e) {
                        console.log(e);
                    }
                },
                logout: async () => {
                    try{
                        await auth().signOut()
                    } catch(e) {
                        console.log(e);
                    }
                }
            }}
        >
            {children}
        </AuthContext.Provider>
    )
}

这是我的屏幕截图错误 在此处输入图像描述

我不知道如何解决它

标签: react-nativefirebase-realtime-databaseuse-context

解决方案


您忘记包装 App 组件,请查看此示例: https ://snack.expo.dev/AVVpx0PJ7


推荐阅读