无法将值存储在React Native的asyncStorage中

Question

asyncstorage中设置的值为null，并且usertext的日志为{[TypeError：undefined不是一个对象（评估'this.state.usertext'）]行：30，列：34}

这里可能是什么问题？

'use strict' 
import React, { Component } from 'react'; 
import { 
AppRegistry, 
StyleSheet, 
Navigator, 
Text, 
TextInput, 
Button, 
AsyncStorage, 
View 
} from 'react-native'; 
import { Actions } from 'react-native-router-flux'; 
import api from './utilities/api'; 

export default class LoginScreen extends Component{ 

constructor(props) { 
super(props); 
this.state = { usertext: 'placeholder' , passwordtext: 'placeholder' ,buttonvalue: ' 
Login'}; 
} 

async login() { 
const res = await api.getLoginResult(); 
const status= res.status; 
console.log('log'+status); 

if(status==='success'){ 
    try { 
    console.log('usertext'+this.state.usertext); 
    await AsyncStorage.setItem('username', this.state.usertext); 
    var username = await AsyncStorage.getItem('username'); 
    console.log('username'+username); 
    await AsyncStorage.setItem('password', this.state.passwordtext); 
    } catch (error) { 
    // Error saving data 
    console.log(error); 
    } 
    Actions.HomeScreen(); 
} 

} 


render() { 

return (
    <View style={styles.container}> 
     <View style={styles.containerLogin}> 
     <View style={styles.headerContainer}> 
    <Text style={styles.welcome}>PLEASE LOGIN</Text> 
    </View> 
    <View style={styles.inputlayouts}> 
    <TextInput 

     onChangeText={(usertext) => this.setState({usertext})} 
     value={this.state.usertext} 
    /> 

    <TextInput 
     onChangeText={(passwordtext) => this.setState({passwordtext})} 
     value={this.state.passwordtext} 
    /> 
    </View> 
    <View style={styles.buttonView}> 
    <Button 
     style={styles.buttonstyle} 
     onPress={this.login} 
     title={this.state.buttonvalue} 
     color="#FF7323"> 
    </Button> 
    </View> 
    </View> 
    </View> 

    ) 


    } 


    } 


var styles = StyleSheet.create({ 
container: { 
flex: 1, 
justifyContent: 'center', 
alignItems: 'stretch', 
backgroundColor: '#1AB591', 
}, 
headerContainer:{ 
backgroundColor:'#FF7323' 
}, 
buttonView:{ 
marginLeft:15, 
marginRight:15, 
marginBottom:15 
}, 
inputlayouts:{ 
marginLeft:6, 
marginRight:6, 
marginBottom:10, 
}, 
containerLogin: { 
justifyContent: 'center', 
alignItems: 'stretch', 
backgroundColor: '#FFF', 
marginLeft:20, 
marginRight:20 
}, 
welcome: { 
fontSize: 20, 
textAlign: 'center', 
margin: 10, 
color:'#FFF' 
}, 
buttonstyle: { 
width:20, 
} 
}); 

Answer 1

变化

<Button 
    style={styles.buttonstyle} 
    onPress={this.login} 
    title={this.state.buttonvalue} 
    color="#FF7323"> 
</Button> 

到

<Button 
    style={styles.buttonstyle} 
    onPress={this.login.bind(this)} 
    title={this.state.buttonvalue} 
    color="#FF7323"> 
</Button> 

当你做onPress={this.login}，方法参照this会比你的组件不同。将this绑定到方法，允许您在函数中引用您的this。