在React Native中将数据注册并推送到Firebase

Question

我有一个寄存器并将数据推送到Firebase功能。我有一个问题，当两个函数嵌套时，它们会注册并存储在Firebase中，但是有警告（如下）。但是，当我删除推送数据功能时，没有警告。我希望能够注册并保存数据。还是我可以编写两个单独的函数，何时onPress可以同时调用两个函数？

这是我的代码：

handleSignUp = () => {

    const { username, email, passwordOne } = this.state;
    const { history } = this.props;

    auth.doCreateUserWithEmailAndPassword(email, passwordOne)
      .then(authUser => {

        // Create a user in your own accessible Firebase Database too
        db.doCreateUser(authUser.user.uid, username, email)
          .then(() => {
            this.setState({ ...INITIAL_STATE }, () => {
              history.navigation.navigate("MainScreenNavigator");
            });
          })
          .catch(error => this.setState({ errorMessage: error.message }));
      })
      .catch(error => this.setState({ errorMessage: error.message }));
  };

警告：

  

警告：无法在已卸载的设备上调用setState（或forceUpdate）   零件。这是空操作，但表示您的内存泄漏   应用。要修复，请取消所有订阅和异步任务   在componentWillUnmount方法中。

doCreactUser函数

export const doCreateUser = (id, username, email) =>
  db.ref(`users/${id}`).set({
    username,
    email,
  });

完整代码：

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  TextInput,
  TouchableOpacity,
  KeyboardAvoidingView
} from "react-native";

import Logo from "../components/Logo";

import { Actions } from "react-native-router-flux";
import { auth, db, firebase } from "../firebase/";

const INITIAL_STATE = {
  username: "",
  email: "",
  passwordOne: "",
  passwordTwo: "",
  errorMessage: null
};


export default class Signup extends Component<{}> {
  constructor(props) {
    super(props);

    this.state = { INITIAL_STATE };
  }

  handleSignUp = () => {
    const { username, email, passwordOne } = this.state;
    const { history } = this.props;
    auth.doCreateUserWithEmailAndPassword(email, passwordOne)
      .then(authUser => {
        // Create a user in your own accessible Firebase Database too
        db.doCreateUser(authUser.user.uid, username, email)
          .then(() => {
            this.setState({ ...INITIAL_STATE }, () => {
              history.navigation.navigate("MainScreenNavigator");
            });
          })
          .catch(error => this.setState({ errorMessage: error.message }));
      })
      .catch(error => this.setState({ errorMessage: error.message }));
  };


  goBack() {
    Actions.pop();
  }

  render() {
    const {
      username,
      email,
      passwordOne,
      passwordTwo,
    } = this.state;

    const isInvalid =
      passwordOne !== passwordTwo ||
      passwordOne === "" ||
      email === "" ||
      username === "";
    const display = isInvalid ? "none" : "flex";

    return (
      <View style={styles.container}>
        <StatusBar backgroundColor="#99d066" barStyle="light-content" />
        <Logo />
        <KeyboardAvoidingView>
          <TextInput
            style={styles.inputBox}
            underlineColorAndroid="rgba(0,0,0,0)"
            placeholder="Full Name"
            placeholderTextColor="#000"
            autoCapitalize="none"
            selectionColor="#fff"
            keyboardType="default"
            onSubmitEditing={() => this.passwordOne.focus()}
            onChangeText={username => this.setState({ username })}
            value={this.state.username}
          />

          <TextInput
            style={styles.inputBox}
            underlineColorAndroid="rgba(0,0,0,0)"
            placeholder="Email"
            placeholderTextColor="#000"
            autoCapitalize="none"
            selectionColor="#fff"
            keyboardType="email-address"
            onSubmitEditing={() => this.passwordOne.focus()}
            onChangeText={email => this.setState({ email })}
            value={this.state.email}
          />
          <TextInput
            style={styles.inputBox}
            underlineColorAndroid="rgba(0,0,0,0)"
            placeholder="Password"
            secureTextEntry={true}
            placeholderTextColor="#000"
            autoCapitalize="none"
            ref={input => (this.passwordOne = input)}
            onChangeText={passwordOne => this.setState({ passwordOne })}
            value={this.state.passwordOne}
          />
          <TextInput
            style={styles.inputBox}
            underlineColorAndroid="rgba(0,0,0,0)"
            placeholder="Confirm Password"
            secureTextEntry={true}
            placeholderTextColor="#000"
            autoCapitalize="none"
            ref={input => (this.passwordTwo = input)}
            onChangeText={passwordTwo => this.setState({ passwordTwo })}
            value={this.state.passwordTwo}
          />
        </KeyboardAvoidingView>

        <TouchableOpacity style={[styles.button, { display }]}>
          <Text style={styles.buttonText} onPress={this.handleSignUp}>
            Sign up
          </Text>
        </TouchableOpacity>

        {this.state.errorMessage && (
          <Text style={{ color: "#b71c1c", textAlign: "center" }}>
            {this.state.errorMessage}
          </Text>
        )}

        <View style={styles.signupTextCont}>
          <Text style={styles.signupText}>Already have an account?</Text>
          <TouchableOpacity onPress={this.goBack}>
            <Text
              style={styles.signupButton}
              onPress={() => this.props.navigation.navigate("Login")}
            >
              {" "}
              Sign in
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({...});