Question

我正在使用我的React Native Android应用程序中的Firebase身份验证，但每次我尝试登录并按下按钮时，它都会给我这个错误：对象不是函数（评估'this2.state'（{ 错误：'验证失败'，加载：false }））

我也查找了类似的答案，但它似乎与我的问题不符。任何帮助将不胜感激。

这是我的代码：

import React from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    PixelRatio,
    TouchableOpacity,
    Image,
    Button,
  } from 'react-native';
  import * as firebase from 'firebase';
import { FormLabel, FormInput } from 'react-native-elements';
import Help from './app/components/Help';
import { Input } from './app/components/Input';



const util = require('util');
firebase.initializeApp({

    apiKey: 'AIzaSyCmjeFuDoMeOkeG5J-TCXzDJ1vtaDqUXjE',
    authDomain: 'dev-pre-do.firebaseapp.com',
    databaseURL: 'https://dev-pre-do.firebaseio.com',
    projectId: 'dev-pre-do',
    storageBucket: 'dev-pre-do.appspot.com',
    messagingSenderId: '943752089124'
  }
);

class LoginScreen extends React.Component {
  static navigationOptions ={
    header: null,

  };

  constructor(props) {
    super(props);
  this.state = {email:'', password:'', error: '', loading:false};
}



  onLoginPress(){
    this.setState({error:'', loading:true});

    const{email, password}  = this.state;
    firebase.auth().signInWithEmailAndPassword(email, password)
    .then(() => {
      this.state({error: '', loading: false});
      this.props.navigation.navigate('CreateIdeaMenu');
    })
    .catch(() => {
      this.state({error: 'Authentification failed', loading: false});
    })
  }

  renderButtonOrLoading(){
    if(this.state.loading) {
      return (
      <Text style={styles.loading}> Loading </Text>
      )}
    return (
    <View>
      <Button style={styles.Button} title='Login'
      onPress={this.onLoginPress.bind(this)}></Button>
      </View>
    )
  }



  render() {

    return (


      <View style={styles.container}>
      <Help onPress = {()=> navigate("HelpFirst")}/>

      <Image style={styles.logo}
          source={require('./app/images/PREDO_logo_white.png')}
        />

        <FormLabel> Email</FormLabel>
        <FormInput onChangeText={email => this.setState({ email })}/>

        <FormLabel> Password</FormLabel>
        <FormInput onChangeText={password => this.setState({ password })}/>
        <Text>{this.state.error}</Text>
      {/*  <Input 
        placeholder='Email'
        label='Email'
        onChangeText={email => this.setState({ email })}
        value={this.state.email}
        />

        <Input 
        placeholder='Password'
        label='Password'
        secureTextEntry
        onChangeText={password => this.setState({ password })}
        value={this.state.password} */}

        {this.renderButtonOrLoading()}

      {/* <Button onPress={() => console.log('pressed')}>Log in</Button>*/}
    {/* <RegForm onPress = {()=> navigate("CreateIdeaMenu")} /> */}
      </View>
    ); 


  }

};



const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#1e1f20',
    paddingLeft: 60,
    paddingRight: 60,
    paddingTop: 10,
  },
Button: {
  width: 200,
  height:100,
      marginBottom: 10,

      backgroundColor: 'purple',
      alignItems: 'center',
      justifyContent: 'center',
},
logo: {
  width: 360,
  height:94,
  marginBottom: 80,
  marginTop: 20,
},
loading: {
  color: 'white',
  fontSize: 50,
}


});


export default LoginScreen;

Answer 1

更新您的代码，如下所示：

onLoginPress(){
    this.setState({error:'', loading:true});

    const{email, password}  = this.state;
    firebase.auth().signInWithEmailAndPassword(email, password)
    .then(() => {
      this.setState({error: '', loading: false});
      this.props.navigation.navigate('CreateIdeaMenu');
    })
    .catch(() => {
      this.setState({error: 'Authentification failed', loading: false});
    })
  }

React Native：对象不是一个函数

1 个答案: