未定义不是对象（评估“ this.login（）。bind”）

Question

因此，我正在使用React Native创建一个登录表单，并且试图调用一种名为login的方法，该方法将使用我们收到的数据登录用户。 当尝试运行登录页面（使用onPress）时，我得到的只是这个“未定义”错误。 那是错误：

未定义不是对象（评估“ this.login（）。bind”）

我在有问题的代码行中添加了注释。

谢谢！

码：

import React ,{ Component } from 'react';
import { TextInput,StyleSheet, Text, View, StatusBar,  TouchableOpacity} from 'react-native';
import { createStackNavigator } from 'react-navigation';
import Form from '../Components/Form';
import Logo from '../Components/Logo';
import signUp from '../Pages/SignUp';
import axios from 'axios'

export default class Login extends React.Component { 
    constructor(props){
        super(props)
        this.state = {
          user:undefined,
          password:undefined,
          logged:undefined
        }
      }
    render(){
        const { navigation } = this.props;
        return (
            <View styles={styles.container}>
                <Logo/>
                <TextInput style={styles.inputBox} 
                    underlineColorAndroid='rgba(0,0,0,0)' 
                    placeholder="Email"
                    placeholderTextColor = "#ffffff"
                    selectionColor="#fff"
                    keyboardType="email-address"
                    onSubmitEditing={()=> this.password.focus()}
                    onChangeText={(text)=>{this.setState({user:text})}}
                    />
                <TextInput style={styles.inputBox} 
                    underlineColorAndroid='rgba(0,0,0,0)' 
                    placeholder="Password"
                    secureTextEntry={true}
                    placeholderTextColor = "#ffffff"
                    onChangeText={(text)=>{this.setState({password:text})}}
                    ref={(input) => this.password = input}
                    />  


                 <TouchableOpacity style={styles.button}>/*Code error here*/
                    <Text style={styles.buttonText} onPress={this.login().bind(this)}>{this.props.type}Login</Text>
                </TouchableOpacity>     
           </View>
        )      
    }

    login(){
        this.setState({logged:false})
        axios.get('https://autofeeder.herokuapp.com/',{
              params: {
                username: this.state.user,
                password: this.state.password
            }
        }).then((data)=>{
          this.setState({logged:true})
        }).catch((error) =>{
          alert(error)
        })
      }

}


const styles = StyleSheet.create({
    container : {
      backgroundColor: '#00838f' ,
      flex: 1,
      alignItems:'center',
      justifyContent:'center'
    },
    signupButton: {
        color:'#ffffff',
        fontSize:16,
        fontWeight:'500',
        width:70
    },
    signupTextCont: {
        backgroundColor: '#00838f' ,
        flexGrow: 4,
        alignItems:'center',
        justifyContent:'flex-end',
        marginVertical:16,
    },
    inputBox: {
        width:300,
        backgroundColor:'#00838f',
        borderRadius: 25,
        paddingHorizontal:16,
        fontSize:16,
        color:'#ffffff',
        marginVertical: 10,
        paddingVertical: 13
      },
      button: {
        width:300,
        backgroundColor:'#1c313a',
         borderRadius: 25,
          marginVertical: 10,
          paddingVertical: 13
      },
      buttonText: {
        fontSize:16,
        fontWeight:'500',
        color:'#ffffff',
        textAlign:'center'
      }

  });




  /*
  const styles = StyleSheet.create({
  container : {
    backgroundColor: '#00838f',
    flexGrow: 1,
    justifyContent:'center',
    alignItems: 'center'
  },

  inputBox: {
    width:300,
    backgroundColor:'rgba(255, 255,255,0.2)',
    borderRadius: 25,
    paddingHorizontal:16,
    fontSize:16,
    color:'#ffffff',
    marginVertical: 10,
    paddingVertical: 13
  },
  button: {
    width:300,
    backgroundColor:'#1c313a',
     borderRadius: 25,
      marginVertical: 10,
      paddingVertical: 13
  },
  buttonText: {
    fontSize:16,
    fontWeight:'500',
    color:'#ffffff',
    textAlign:'center'
  }

}); */


  const LoginStack = createStackNavigator({
      Home:Login,
      SignUp:signUp
  })

Answer 1

this.login.bind(this)

您已经在()上调用了该函数

Answer 2

您可以使用以下语法：

login = () => {
    this.setState({logged:false})
    axios.get('https://autofeeder.herokuapp.com/',{
          params: {
            username: this.state.user,
            password: this.state.password
        }
    }).then((data)=>{
      this.setState({logged:true})
    }).catch((error) =>{
      alert(error)
    })
}

并致电：

onPress={this.login()}

Answer 3

绑定应类似于：

onPress = {this.login.bind(this)}

有关反应绑定模式的更多信息，请查看： freecodecamp