react-native：ログイン機能で `this.state`が定義されていません

Question

私のコンポーネント内の機能でthis.stateにアクセスするのに問題があります。

常に私が結合ログインを試みたエラー

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(); 
} 

"this.state.password、未定義のオブジェクトthis.state.usernameではありません" を取得これにはステートはありませんでした。

他の質問は既に確認済みですが、何も処理されていません。

何が原因なのでしょうか？

Answer 1

あなたのログイン機能は、Touchableに渡された場合、正しいthisにアクセスするためにバインドする必要があります。 は、これらの方法のいずれかで固定することでした：あなたのコンストラクタで

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

OR: 

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

Answer 2

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

Answer 3

以下のようなバインディングステートメントを置き換える私は同様の問題がありました。私にとっては、私がコーディングしている間、私は "ホットリロード"で自分の反応ネイティブを持っていたので、問題が発生しました。

これは基本的には、コンストラクタが呼び出されていない（アプリケーションがコーディング中にライブだったため）、定義されていない変数を要求していたことを意味します。

アプリケーションを終了/開始するか、ただ再読み込みすると、状態が定義されます（最初にアプリケーションを読み込んでいる間にコンストラクタ（）が呼び出されるため）。

問題が発生している可能性もありますか？