react-native：`this.state`在登录函数中未定义

Question

I'm having trouble accessing this.state in functions inside my component.

Always I get "Undefined is not a object this.state.username , this.state.password " error

SimpleForm.js

import Expo from 'expo';
import React from 'react';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import App from './App';
import RegisterForm from './register';
import { View, Text, TextInput, Image, TouchableOpacity, AsyncStorage, StyleSheet } from 'react-native';
import { YourRestApi } from './constants/api3';

class SimpleForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '', password: '', datas: '' };
    this.login = this.login.bind(this, this.state.username, this.state.password);
  }
  componentWillMount() {
    this.login();
  }

  registerscreen = () => {
    this.props.navigation.navigate('Register');
  }


   login() {
    YourRestApi(this.state.username, this.state.password)
      .then((response) => {
        console.log(response.success);
        this.setState({ loading: false, datas: response });
      });
    if (this.state.datas.success === true) {
      const info = this.state.datas.message;

      AsyncStorage.setItem('info', JSON.stringify(info));
      this.props.navigation.navigate('SecondScreen');
    } else {
      alert(this.state.datas.message);
    } 
  }

   render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Image source={require('./assets/img/sd.png')} style={styles.backgroundImage}>
          <View style={styles.content}>
            <Text style={styles.logo}>Toto Prediction </Text>
            <View style={styles.inputContainer}>

              <TextInput
                underlineColorAndroid='transparent' style={styles.input}
                onChangeText={(username) => this.setState({ username })} 
                value={this.state.username} placeholder='username'
              /> 

              <TextInput
                secureTextEntry underlineColorAndroid='transparent' style={styles.input}
                onChangeText={(password) => this.setState({ password })} 
                value={this.state.password} placeholder='password'
              /> 
            </View>
            <TouchableOpacity onPress={this.login} style={styles.buttonContainer}>
              <Text style={styles.buttonText}>Login</Text>
            </TouchableOpacity>
            this._onPressGet.bind(this)
            <TouchableOpacity onPress={this.registerscreen} style={styles.buttonContainer}>
              <Text style={styles.buttonText}>Register</Text>
            </TouchableOpacity>
          </View>
        </Image>
      </View>

    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundImage: {
    flex: 1,
    alignSelf: 'stretch',
    width: null,
    justifyContent: 'center', 
  },
  content: {
    alignItems: 'center',
  },
  logo: {
    color: 'white',
    fontSize: 40,
    fontStyle: 'italic',
    fontWeight: 'bold',
    textShadowColor: '#252525',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 15,
    marginBottom: 20,
  },
  inputContainer: {
    margin: 20,
    marginBottom: 0,
    padding: 20,
    paddingBottom: 10,
    alignSelf: 'stretch',
    borderWidth: 1,
    borderColor: '#fff',
    backgroundColor: 'rgba(255,255,255,0.2)',
  },
  input: {
    fontSize: 16,
    height: 40,
    padding: 10,
    marginBottom: 10,
    backgroundColor: 'rgba(255,255,255,1)',
  },
  buttonContainer: {
    margin: 20,
    padding: 20,
    backgroundColor: 'blue',
    borderWidth: 1,
    borderColor: '#fff',
    backgroundColor: 'rgba(255,255,255,0.6)',
  },
  buttonText: {
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});
const SimpleApp = DrawerNavigator({
  Onescreen: { screen: SimpleForm },
  SecondScreen: { screen: App },
  Register: { screen: RegisterForm },
});
Expo.registerRootComponent(SimpleApp);

Api3.js

export function YourRestApi(username1, password1) {
  fetchlogin(username1, password1);
}
function fetchlogin(username1, password1) {
  const details = {
    username: username1,
    password: password1,
  };
  const formBody = Object.keys(details).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(details[key])}`).join('&');

  fetch('https://*********************', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: formBody,
  })
    .then((response) => response.json())
    .then((response) => {
      console.log('requestAppInstallation success ', response);
      return response;
    })
    .done();
}

I tried binding login to this.state but doesnt worked

I already checked other questions but nothing is worked

Any idea what could be causing this ?

Answer 1

In your constructor replace the binding statement like below

constructor(props) {
    super(props);
    this.state = { username: '', password: '', datas: '' };
    this.login = this.login.bind(this);
  }

Answer 2

Your login function should be bound in order for it to access the correct this if passed to a Touchable . Could be fixed by either one of these ways:

 <TouchableOpacity onPress={this.login.bind(this)} ...>

 OR:

 <TouchableOpacity onPress={() => this.login()} ...>

Answer 3

It is basically nothing but just an error returned by firebase in case user enters wrongly formatted email. Try entering rightly formatted email id in the signup or login form and you will not get that error from firebase.

Firebase basically checks at its end whether user entered correct mail id or not while creating new user.

Answer 4

I had a similar issue. For me the issue arose because I had my react-native on "hot reloading", while I was coding.

This basically means that I was asking for a variable that wasn't defined, because the constructor wasn't called (the app was live while coding).

Once you quit/start or just reload the app, then it does define the state (because while initially loading the app it calls the constructor() ).

Might that have been your issue as well?