React App不将文档添加到Firebase Firestore中的集合

Question

我正在尝试将用户信息添加到Firestore数据库中，但似乎无法使“ doAddUserToDB”功能正常工作。控制台不会给我任何错误，并且代码语法也会编译。但是，firestore控制台未更新。我通过构建一个在应用程序的主index.js中初始化了一个实例的firebase类来构造应用程序，并且所有组件都具有该实例的副本，并且在注册组件中，我调用了“ doAddUserToDB”该文件中的功能。需要明确的是，身份验证已完全起作用，并且从firestore检索也正在起作用，它正在添加似乎很困难的文档。

这是firebase.js文件：

import firebase from 'firebase';
import app from 'firebase/app';
import firestore from 'firebase/firestore';
import React from 'react';
//I have the proper details for this variable I simply left them out for privacy reasons
var firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

class Firebase {
    constructor(){
        var firebaseApp = firebase.initializeApp(firebaseConfig);
        this.auth = firebaseApp.auth();
        this.db = firebaseApp.firestore();

    }

    doCreateUserWithEmailAndPassword = (email, password) =>
      this.auth.createUserWithEmailAndPassword(email, password);

    doSignInWithEmailAndPassword = (email, password) =>
      this.auth.signInWithEmailAndPassword(email, password);

    doSignOut = () =>
      this.auth.signOut();

    doPasswordReset = email =>
      this.auth.sendPasswordResetEmail(email);

    doPasswordUpdate = password =>
      this.auth.currentUser.updatePassword(password);

    retrieveUsers =()=>{
        this.db.collection("users").get()
        .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
        // doc.data() is never undefined for query doc snapshots
        console.log(doc.id, " => ", doc.data());
    });
  });
    }

    doAddUserToDB = (theusername, theemail, thelevel, thescore) =>
      this.db.collection("users").add({
        email: theemail,
        level:thelevel,
        score:thescore,
        username: theusername
      })
      .then(function() {
        console.log("Document successfully written!");
      })
      .catch(function(error) {
          console.error("Error writing document: ", error);
      });





}
export default Firebase;

这是我要调用该函数的下一个文件：

import React, { Component } from 'react';
import {Modal} from 'react-bootstrap';
import { Link, withRouter } from 'react-router-dom';
import * as ROUTES from '../../constants/routes';
import { withFirebase,FirebaseContext } from '../Firebase';
import { compose } from 'recompose';


const SignUpPage = () => (
  <div>
    <FirebaseContext.Consumer>
      {firebase => <SignUpForm firebase={firebase} />}
    </FirebaseContext.Consumer>
  </div>
);

const INITIAL_STATE = {
  username: '',
  email: '',
  passwordOne: '',
  passwordTwo: '',
  error: null,
};

class SignUpFormBase extends Component {
  constructor(props) {
    super(props);
    this.state = {...INITIAL_STATE };
  }


  signUpSubmit = event => {

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

    this.props.firebase
    .doCreateUserWithEmailAndPassword(email, passwordOne)
      .then(() => {
        this.props.firebase.doAddUserToDB(username,email, 1, 0);
        this.setState({ ...INITIAL_STATE });
        window.location.href = ROUTES.DASHBOARD;
      })
      .catch(error => {
        this.setState({ error });
      });

    event.preventDefault();
  }


  onChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

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

    const isInvalid =
      passwordOne !== passwordTwo ||
      passwordOne === '' ||
      email === '' ||
      username === '';
    return (
      <div id="signUpDiv">
        <Modal show={true} centered = 'true' >

              <Modal.Header closeButton>
                <Modal.Title>Create your Account</Modal.Title>
              </Modal.Header>

              <Modal.Body>
                <p align="center">Please enter your details to sign up.</p>

                <form align="center" >

                    <p><input name="username"value={username}onChange={this.onChange}type="text"placeholder="Username"/></p>

                    <p><input name="email"value={email}onChange={this.onChange}type="text"placeholder="Email Address"/><br/></p>
                    <p><input name="passwordOne"value={passwordOne}onChange={this.onChange}type="password"placeholder="Password"/><br/></p>
                    <p><input name="passwordTwo"value={passwordTwo}onChange={this.onChange}type="password"placeholder="Confirm Password"/><br/></p>


                    {error && <p>{error.message}</p>}

                </form>

              </Modal.Body>

              <Modal.Footer>
                <button disabled={isInvalid} className = "btn blue-gradient  btn-info"  onClick={this.signUpSubmit}>
              Sign Up
                </button>
                <button onClick ={this.hideSignUp} className = "btn blue-gradient  btn-outline-info" >
              Cancel
                </button>
              </Modal.Footer>
            </Modal>
     </div>
    );
  }


  hideSignUp(){
    window.location=ROUTES.WELCOME;
  }


}


const SignUpLink = () => (
  <p>
    Don't have an account? <Link to={ROUTES.SIGN_UP}>Sign Up</Link>
  </p>
);

const SignUpForm = compose(withRouter,withFirebase,)(SignUpFormBase);
export default SignUpPage;
export { SignUpForm, SignUpLink };