Question

我在访问组件内部的函数时遇到问题。

我总是得到＆＃34;未定义不是对象this.state，this.state.username＆＃34;错误

SimpleForm.js

this.state.password

Api3.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);

我尝试将登录绑定到this.state但不起作用

我已经检查了其他问题，但没有任何工作

知道可能导致这种情况的原因吗？

Answer 1

在构造函数中替换下面的绑定语句

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

Answer 2

您的登录功能应该受到约束，以便在传递给this时访问正确的Touchable。可以通过以下任何一种方式修复：

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

 OR:

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

Answer 3

如果用户输入格式错误的电子邮件，基本上只是firebase返回的错误。尝试在注册或登录表单中输入格式正确的电子邮件ID，您将不会从firebase获得该错误。

Firebase基本上会在创建新用户时检查用户是否输入了正确的邮件ID。

Answer 4

我有类似的问题。对我来说，这个问题出现了，因为我在编写时正在“热重新加载”中使用我的反应本身。

这基本上意味着我要求一个未定义的变量，因为没有调用构造函数（应用程序在编码时是活的）。

退出/启动或只是重新加载应用程序后，它确实定义了状态（因为在最初加载应用程序时它会调用构造函数（））。

这可能也是你的问题吗？

react-native：`this.state`在登录功能中未定义

4 个答案: