javascript - 使用 Firebase 反应本机身份验证
问题描述
我正在开发一个应用程序,我想在 Firebase 中使用电子邮件和密码对用户进行身份验证。我已经在我的 Firebase 控制台中启用了电子邮件和密码登录方法。在运行应用程序时,我遇到了类型错误“_this.setState 不是函数。下面是我的代码。请检查并指导我。谢谢。
我的 App.js
import React from "react";
import FirebaseKeys from "./config";
import * as firebase from "firebase";
export default () => {
const [isLoading, setIsLoading] = React.useState(true);
React.useEffect(() => {
setTimeout(() => {
setIsLoading(false);
}, 2000);
}, []);
state = {
loggedIn: null,
};
var firebaseConfig = FirebaseKeys;
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.setState({
loggedIn: true,
});
} else {
this.setState({
loggedIn: false,
});
}
});
if (isLoading) {
return <Loading />;
}
return (
<NavigationContainer>
{loggedIn ? <DrawerScreen /> : <AuthStackScreen />}
</NavigationContainer>
);
};
LogginScreen.js
import firebase from "firebase";
export const SignIn = ({ navigation }) => {
state = {
email: "",
password: "",
errorMessage: null,
};
handleLogin = () => {
const { email, password } = this.state;
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.catch((error) => this.setState({ errorMessage: error.message }));
};
return (
<View style={styles.form}>
<View>
<Text style={styles.inputTitle}>Email Address</Text>
<TextInput
style={styles.input}
autoCapitalize="none"
onChangeText={(email) => this.setState({ email })}
value={this.state.email}
></TextInput>
</View>
<View style={{ marginTop: 32 }}>
<Text style={styles.inputTitle}>Password</Text>
<TextInput
style={styles.input}
secureTextEntry
autoCapitalize="none"
onChangeText={(password) => this.setState({ password })}
value={this.state.password}
></TextInput>
</View>
</View>
<TouchableOpacity style={styles.button} onPress={this.handleLogin}>
<Text style={{ color: "#FFF", fontWeight: "500" }}>Sign in</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ alignSelf: "center", marginTop: 32 }}
onPress={() => navigation.push("SignUp")}
>
<Text style={{ color: "#414959", fontSize: 13 }}>
New to SocialApp?{" "}
<Text style={{ fontWeight: "500", color: "#E9446A" }}>Sign up</Text>
</Text>
</TouchableOpacity>
</View>
);
};
解决方案
您的 App 组件是功能组件,因此不存在 this.setState,您应该改用 useState。
import React from "react";
import FirebaseKeys from "./config";
import * as firebase from "firebase";
export default () => {
const [isLoading, setIsLoading] = React.useState(true);
const [loggedIn, setLoggedIn] = React.useState(false);
React.useEffect(() => {
setTimeout(() => {
setIsLoading(false);
}, 2000);
}, []);
state = {
loggedIn: null,
};
var firebaseConfig = FirebaseKeys;
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
firebase.auth().onAuthStateChanged((user) => {
if (user) {
setLoggedIn(true)
} else {
setLoggedIn(false)
}
});
if (isLoading) {
return <Loading />;
}
return (
<NavigationContainer>
{loggedIn ? <DrawerScreen /> : <AuthStackScreen />}
</NavigationContainer>
);
};
推荐阅读
- javascript - 为什么我在 slack 中设置主题时收到 {"ok":false,"error":"channel_not_found"}?
- php - How to display year in correct format in Twig?
- php - 测试文件中的引导 laravel 环境
- java - 递归快速排序比迭代快速排序快
- c - fread 和 fwrite 中的所有参数代表什么?
- c# - 将xml反序列化为c#时获取xml属性的值
- ios - 正在设置的变量上的阻塞方法
- haskell - Haskell 包的问题(newsynth)
- laravel - 无法删除 laravel 存储缓存文件夹
- php - 尝试用 PHP 中的链接替换用户标签 @user 时出错