react-native - 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>
)
}
这是我的屏幕截图错误 在此处输入图像描述
我不知道如何解决它
解决方案
您忘记包装 App 组件,请查看此示例: https ://snack.expo.dev/AVVpx0PJ7
推荐阅读
- ruby-on-rails - 升级到 Rails 6 后:Content-Disposition 标头现在添加了奇怪的文件名*=UTF-8
- azure-cli - 是否有任何系统方法可以找到每个 Azure CLI 命令所需的最低访问权限或角色?
- javascript - 使用 API 渲染数据
- sql - SQL 中的高效(线性时间)嵌套查询
- python - 构建数据矩阵时如何处理“索引越界”?
- anaconda - conda-forge 存储库是否需要 Anaconda 商业版许可证?
- php - Google Big Query insertAll() 返回成功结果,但表为空
- jenkins - 将扩展选择参数值从一个作业传递到 Jenkins 管道中的另一个远程作业
- haskell - 使用 Gloss 时有没有办法让原点位于左上角
- python - 在 Matplotlib 文本类中将两个列表组合在一起并进行排序