this.setState 不是函数。 React Native 菜鸟

Question

我不断收到以下错误：this.setState 在我的 React Native 项目中未定义。我以前在 React 中从未见过这个错误，但 React Native 对我来说是新的。我做了一些研究，有很多人建议在 onPress 属性中使用构造函数和 bind(this) 或使用箭头函数。我都试过了，但似乎都不起作用。另请注意，我的前 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()

将更改 this 上下文

将其更改为 箭头函数 以保留 this 上下文。 -->

firebase.auth().createUserWithEmailAndPassword(this.state.username, this.state.password).catch((error) => {

this.setState 不是函数。 React Native 菜鸟

this.setState is not a function. React Native noobie

setstate

react-native