Undefined不是一个对象(评估'this.state.username')

Question

我是 React Native 的新手，刚开始学习它。 我想使用 React Native 构建 Android App。

现在，我有一个基本的登录表单，它将向服务器发送获取请求并显示用户是否获得授权。

但是当我尝试提醒输入字段的值时，它会抛出错误"未定义不是对象">

我这里指的是官方文档，这段代码可以工作。 我也在这里尝试了基本的反应形式。 我正在使用UI小猫文本输入进行输入，我也使用了本机反应文本输入，它给出了相同的错误。

我当前的代码是：

import React from 'react';
import { Alert, StyleSheet, Text, TextInput, View } from 'react-native';
import {RkButton, RkText, RkTextInput, RkCard} from 'react-native-ui-kitten';
import Icon from 'react-native-vector-icons/Ionicons';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const target = event.target;
this.setState({
username: target.username,
password: target.password
});
}

login()
{
Alert.alert(this.state.username) //getting error here
let data = {
method: 'POST',
credentials: 'same-origin',
mode: 'same-origin',
body: JSON.stringify({
username: this.state.username,
password: this.state.password
}),
headers: {
'Accept':       'application/json',
'Content-Type': 'application/json',
}
}
fetch('http://demourl.com/login',data)
.then((response) => response.json())
.then((responseJson) => {
if (responseJson.success == 'true') {
Alert.alert('Login Successfull!')
}
else {
Alert.alert('Login Failed')
}
})
.catch((error) => {
console.error(error);
});
;
}
render() {
return (
<View style={styles.container}>
<RkCard style={{padding: 20}}>
<View style={{alignItems: 'center',padding: 10}}>
<RkText rkType='warning large' style={{fontSize: 40}}>Log In</RkText>
</View>
<View style={{alignItems: 'center',padding: 10}}>
<RkTextInput placeholder='Username' value={this.state.username} onChange={this.handleChange} />
<RkTextInput placeholder='Password' value={this.state.password} onChange={this.handleChange}/>
</View>
<View style={{alignItems: 'center',padding: 10}}>
<RkButton rkType='success small' title="Press Me"
onPress={this.login}
>Log In!</RkButton>
</View>
</RkCard>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop: 65,
backgroundColor: '#fff',
justifyContent: 'center',
padding: 10
},
});

请告诉我哪里不了解工作。 或者我的代码有问题的地方。 提前谢谢。

Answer 1

像handleChange一样绑定login函数或使用类似arrow函数

login = () => {
...
}

在此处查看箭头函数文档。

希望这会有所帮助！