応答ネイティブの非同期関数内でリダイレクトするメソッドを呼び出すことは可能ですか？

Question

私はここに示すように反応してネイティブアプリケーションを作成し、firebaseを使用して自分のユーザーの資格情報を認証します（より多くのコードを含めるように編集されています）。

import React, { Component } from 'react'; 
import { Text, View, Button, TextInput, Alert } from 'react-native'; 
import { firebaseRef } from '../config/firebase'; 

class register extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {firstName: '', lastName:'', email: '', password: '', confirmPassword: '', success: true}; 
    this.register = this.register.bind(this); //grants access to the state objects 
} 

redirect(){ 
    this.props.navigation.navigate('home'); 
} 

register(){ 
    firebaseRef.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then(function(user) { 
    Alert.alert('Congratulations', 'You have successfully registered your email address'); 
}, 
    function(error) { 
    Alert.alert('Registration Failed', 'failure'); 
    console.log(error.code); 
    console.log(error.message); 
    this.redirect(); 
    }); 
} 

failedRegistration(){ 
    Alert.alert('Registration Failed', 'failure'); 
    this.setState({success: false}); 
} 

successfulRegistration(){ 
    Alert.alert('Well Done', 'You have successfully registered.'); 
} 

render() { 
    return (
     <View style={{backgroundColor:'cyan', flex:1, alignItems: 'center', justifyContent: 'center'}}> 
     <TextInput 
      style={{backgroundColor:'orange', width: 200}} 
      returnKeyType='next' 
      placeholder='first name' 
      onChangeText={(input) => this.setState({firstName: input})} 
      value={this.props.input} 
      /> 
     <TextInput 
      style={{backgroundColor:'orange', width: 200}} 
      returnKeyType='next' 
      placeholder='last name' 
      onChangeText={(input) => this.setState({lastName: input})} 
      value={this.props.input} 
      /> 
     <TextInput 
      style={{backgroundColor:'orange', width: 200}} 
      returnKeyType='next' 
      placeholder='email' 
      onChangeText={(input) => this.setState({email: input})} 
      value={this.props.input} 
      /> 
     <TextInput 
      style={{backgroundColor:'orange', width: 200}} 
      returnKeyType='next' 
      placeholder='password' 
      onChangeText={(input) => this.setState({password: input})} 
      value={this.props.input} 
      /> 
     <TextInput 
      style={{backgroundColor:'orange', width: 200}} 
      returnKeyType='next' 
      placeholder='password' 
      onChangeText={(input) => this.setState({confirmPassword: input})} 
      value={this.props.input} 
      /> 
      <Text>{this.state.firstName}</Text> 
      <Text>{this.state.lastName}</Text> 
      <Text>{this.state.email}</Text> 
      <Text>{this.state.password}</Text> 
      <Text>{this.state.confirmPassword}</Text> 
     <Button title={'REGISTER'} onPress={() => this.register()}></Button> 
     </View> 
    ) 
    } 

}

輸出デフォルトのレジスタと、 this.redirect（）のようなメソッドを呼び出すと、 'this.redirect is not a function'というエラーが返されます。

お手数をおかけしますようお願い申し上げます。

Answer 1

これを回避する1つの方法：これを別の変数に格納し、それを使用して関数を呼び出します。

register(){ 
    var that = this; 
    firebaseRef.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then(function(user) { 
    Alert.alert('Congratulations', 'You have successfully registered your email address'); 
}, 
    function(error) { 
    Alert.alert('Registration Failed', 'failure'); 
    console.log(error.code); 
    console.log(error.message); 
    that.redirect(); 
    }); 
} 

また、あなたはあなたが（）this.redirect呼び出している場合を含む多くのコードを含めてくださいすることができる方法

<Button title={'REGISTER'} onPress={this.register.bind(this)}></Button>