我不断收到以下错误:我的React Native项目未定义this.setState。我以前从未在React中看到此错误,但是React Native对我来说是新的。我已经进行了一些研究,并且很多人建议使用构造函数和bind(this)或在onPress属性中使用箭头功能。我都尝试过,但似乎都没有用。还请注意,我的前2个函数可以正常工作,它是引发错误的createUser函数。在此先感谢您的帮助。这是我的原始代码:
import React, {Component} from 'react';
import {ScrollView, StyleSheet, TextInput, Text, View, Image, Button } from 'react-native';
import firebase from '../firebase.js';
class Auth extends Component {
state = {
username: "",
password: "",
error: ""}
onChangeUsername= (event) => {
this.setState({ username: event.nativeEvent.text})
}
onChangePassword= (event) => {
this.setState({ password: event.nativeEvent.text})
}
createUser = (event) =>{
firebase.auth().createUserWithEmailAndPassword(this.state.username, this.state.password).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
if(errorCode === "auth/invalid-email")
{this.setState({error: 2})}
console.log(error.code);
console.log(error.message);
});
}
render(){
return(
<View style={{width: "100%", height: "100%", backgroundColor: "#eeeeee",flexDirection:"column", alignItems:"center", justifyContent:"center"}}>
<Text>Email</Text>
<TextInput
value={this.state.username}
autoCorrect={false}
onChange={this.onChangeUsername}
style={{width: "80%", height: "10%", backgroundColor: "white", padding: "2%", margin:"2%"}}
placeholder={"Enter Email"}
autoComplete={"off"}
/>
<Text>Password</Text>
<TextInput
value= {this.state.password}
autoCorrect={false}
onChange={this.onChangePassword}
style={{width: "80%", height: "10%", backgroundColor: "white", padding: "2%", margin:"2%"}}
placeholder={"Enter Password"}
secureTextEntry={true}
/>
<Button title="Sign Up" style={{backgroundColor: "blue", padding: "2%", margin:"2%"}} onPress={(e)=>{this.createUser(e)}}></Button>
<Text>{this.state.error}</Text>
<View style={{width: "100%", height:"20%"}}></View>
</View>
);
}
}
export default Auth;
我尝试替换
state = {
username: "",
password: "",
error: ""}
与
constructor(props) {
super(props);
this.state = {
username: "",
password: "",
error: ""};
this.createUser = this.createUser.bind(this);
}
我也尝试替换:
<Button title="Sign Up" style={{backgroundColor: "blue", padding: "2%", margin:"2%"}} onPress={this.createUser}></Button>
和
createUser = () =>{
与
<Button title="Sign Up" style={{backgroundColor: "blue", padding: "2%", margin:"2%"}} onPress={(e)=>{this.createUser(e)}}></Button>
和
createUser = (event) =>{
但是这些都不起作用。
答案 0 :(得分:3)
我认为问题出在setState之后:
{this.setState({error: 2})}
这是因为行
firebase.auth().createUserWithEmailAndPassword(this.state.username, this.state.password).catch(function(error) {
由于使用function()
将其更改为箭头功能以保留此上下文。 ->
firebase.auth().createUserWithEmailAndPassword(this.state.username, this.state.password).catch((error) => {