Как бороться с задержкой ответа API в реагировать нативно с использованием приставки?

Question

Я создаю реактивное приложение, которое, когда пользователь пытается войти, запускает firebase.CreateUser, а затем API из firebase для создания этого пользователя в моей базе данных (Firebase Real-Time). Проблема в том, что когда выполняется componentDidUpdate, у меня все еще нет результата от моей функции firebaseFunction, тогда мои реквизиты обновляются, только если я нажимаю на экран. Я хотел бы знать, как бороться с этим. Я использую избыточность.

Следуйте моему коду:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, Image,Alert} from 'react-native';
import logo from '../../asserts/logo.png'
import { TouchableOpacity, TextInput } from 'react-native-gesture-handler';
import { Divider,Input} from 'react-native-elements';
import axios from 'axios';
import { connect } from 'react-redux';
import { signupUser} from '../../store/actions/Section/actions';


class Signin extends Component {

state = {
    fullName:'',
    userName:'',
    email:'',
    password:'',
    confirmPassword:'',
    bornDate:'',
    State:'',
    City:''
};

      handleEmailChange = val => {
        this.setState({ email:val });
    };

    handlePasswordChange = val => {
        this.setState({ password:val });
    };

    handleConfirmPasswordChange = val => {
        this.setState({ confirmPassword:val });
    };

    handleNameChange = val => {
        this.setState({ fullName:val });
    };

    handleUserNameChange = val => {
        this.setState({ userName:val });
    };

    handleStateChange = val => {
        this.setState({ State:val });
    };

    handleCityChange = val => {
        this.setState({ City:val });
    };
    handleBornDateChange = val => {
        this.setState({ bornDate:val });
    };



    onSignInUser = () => {

        const {email,password} = this.state
        if(email=='' || password=='')
            return;

        this.props.signUp(this.state.fullName,this.state.userName, this.state.email,this.state.password,this.state.confirmPassword,this.state.bornDate,this.state.State,this.state.City);   
       // this.props.navigation.navigate('User');
  };

  componentDidUpdate() {
    const { idUser, loading,error } = this.props;
    console.log(idUser);
    console.log('aqui');
    if (!loading && error) Alert.alert('Erro', error);
    if (!loading && idUser) this.props.navigation.navigate('User');
  }

render() {
  return (
    <View style={styles.container}>
        <View style={styles.flexCenter}>
            <Image source={logo} style={styles.logoImage}/>
            <Text style={styles.logoText} >HomeShare</Text>
            <Text style={styles.sublogoText} >SignUp</Text>
        </View>
        <Divider style={styles.divider} />
        <View style={styles.flexButton}>
            <View style={styles.inputContainer}>
                <Input style={styles.textInput} onChangeText={this.handleNameChange} value={this.state.fullName} placeholder='Nome'/>
                <Input style={styles.textInput} onChangeText={this.handleUserNameChange} value={this.state.userName}  placeholder='User'/>
                <Input style={styles.textInput} onChangeText={this.handleBornDateChange} value={this.state.bornDate}  placeholder='Nascimento'/> 
                <Input style={styles.textInput} onChangeText={this.handleStateChange} value={this.state.State}  placeholder='Estado'/> 
                <Input style={styles.textInput } onChangeText={this.handleCityChange} value={this.state.City}  placeholder='Cidade'/> 
                <Input style={styles.textInput} onChangeText={this.handleEmailChange} value={this.state.email} placeholder='E-mail' keyboardType={'email-address'}/>
                <Input style={styles.textInput} onChangeText={this.handlePasswordChange} value={this.state.password}  placeholder='Senha' secureTextEntry={true}/>
                 <Input style={styles.textInput} onChangeText={this.handleConfirmPasswordChange} value={this.state.confirmPassword}  placeholder='Confirme sua Senha' secureTextEntry={true}/>
            </View>
            <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={this.onSignInUser} >
                <View>
                    <Text style={styles.buttonText}>SignIn</Text>
                </View>
            </TouchableOpacity>
            <Text style={{marginTop:10}}>Ou</Text>
            <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={this.signInUser}>
                <View>
                    <Text style={styles.buttonText}>Entrar com Facebook</Text>
                </View>
            </TouchableOpacity>
        </View>
    </View>
  );
}


}



const mapStateToProps = ({ section: { restoring, loading, user, error, logged, idUser } }) => ({
    restoring: restoring,
    loading: loading,
    user: user,
    error: error,
    logged: logged,
    idUser: idUser
  });



  const mapDispatchToProps = {
        signUp:signupUser
  };

  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(Signin); 

Мое действие:

    export const signupUser = (fullName,userName, email,password,confirmPassword,bornDate,State,City) => dispatch => { dispatch(sessionLoading());
    firebaseService.auth().createUserWithEmailAndPassword(email, password).then(user => {
    console.log(user);
                   firebaseService.auth().currentUser.getIdToken(true).then(function(idToken) {
  SectionService.signIn(idToken,fullName,userName, email,password,confirmPassword,bornDate,State,City).then((response) =>{
    console.log(response);
    dispatch(sessionSetId(response));

  }).catch(e=> {
    dispatch(sessionError(e));
  });
   }).catch(function(error) {
     dispatch(sessionError(e));
  });

 })
 .catch(error => {
  dispatch(sessionError(error.message));
  });

Answer 1

Предлагаемое решение состоит в том, чтобы обрабатывать создание учетной записи в обратном вызове createUser и обновлять его другими данными в облачной функции. В качестве альтернативы вы можете настроить прослушиватель, который ищет документ, который затем будет создан, и прослушиватель будет уведомлен.

Я лично создаю документ пользователя на стороне клиента, потому что я создаю его только с некоторыми доступными данными. на клиенте, но ваш вариант использования будет диктовать ваш предпочтительный подход.