Javascript Undefined不是对象（计算'；this.state.username'；）

我是React Native的新手，刚开始学习。 我想用React Native构建Android应用程序

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

但当我试图提醒输入字段的值时，它抛出错误“Undefined不是对象”

我指的是官方文件，这个代码正在运行。 我也尝试过基本的反应形式。 我使用的是输入，我也使用了原生的react TextInput，它给出了相同的错误

我目前的代码是：

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

从“React”导入React；
从“react native”导入{Alert，StyleSheet，Text，TextInput，View}；
从“react native ui kitten”导入{RkButton，RkText，RkTextInput，RkCard}；
从“反应本机矢量图标/离子图标”导入图标；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”，
密码：“”
};
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
const target=event.target；
这是我的国家({
用户名：target.username，
密码：target.password
});
}
登录（）
{
Alert.Alert（this.state.username）//此处出现错误
让数据={
方法：“POST”，
凭据：“相同来源”，
模式：“同一来源”，
正文：JSON.stringify({
用户名：this.state.username，
密码：this.state.password
}),
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
}
}
取（'http://demourl.com/login",数据)
.then（（response）=>response.json（））
.然后（（responseJson）=>{
if（responseJson.success==“true”）{
Alert.Alert（'Login Successfull！'）
}
否则{
Alert.Alert（'登录失败'）
}
})
.catch（（错误）=>{
控制台错误（error）；
});
;
}
render（）{
返回(
登录
登录
);
}
}
const styles=StyleSheet.create({
容器：{
玛金托普：65，
背景颜色：“#fff”，
为内容辩护：“中心”，
填充：10
},
});

请告诉我在哪里我不能理解工作。或者我的代码有缺陷的地方。

---

提前感谢。

绑定

登录

功能，就像您对

handleChange

所做的那样，或者使用

箭头

功能，如

login = () => {
  ...
}

看一下arrow函数文档

---

希望这会有帮助

将

onPress={this.login}

更改为

onPress={（）=>this.login（）}

我在构造函数中将login函数绑定为this.login=this.login.bind（this）；。。。错误现在消失了..谢谢..但我仍然无法在alert中访问用户名…它显示为空..我在handlechange函数中警告target.username…那里也是空的..我如何访问handlechange函数中的输入..我的代码这样做是错误的吗？抱歉，我从未使用过此库，但根据他们的代码，您可以传递任何有效的文本输入道具，因此如果您只需要文本，请使用

onChangeText

。看一下这个答案，这篇文章对我有用…谢谢！