Question

我不断收到以下错误：我的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) =>{

但是这些都不起作用。

Answer 1

我认为问题出在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) => {

this.setState不是函数。反应本机noobie

1 个答案: