Зарегистрируйте и отправьте данные в Firebase в React Native - PullRequest
0 голосов
/ 07 сентября 2018

У меня есть регистры и отправка данных в функцию Firebase. У меня проблема в том, что когда две функции вложены, они регистрируются и сохраняются в Firebase, но есть предупреждения (ниже). Но когда я удаляю функцию push-данных, предупреждения нет. Я хочу иметь возможность зарегистрироваться и иметь возможность сохранять данные. Или я могу написать две отдельные функции и когда 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({...});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...