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

时间:2019-08-21 14:48:11

标签: react-native setstate

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

但是这些都不起作用。

1 个答案:

答案 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) => {