反應 firebase 自定義字段身份驗證創建用戶未將自定義字段存儲在 firestore 數據庫集合中

Question

import React, { Component } from "react";
import fire from "../config/fire";
import { Form, Button } from "react-bootstrap";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import logo from "./logo.png";

export default class CreateUser extends React.Component {
  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      email: "",
      pwd: "",
      name: "",
      phoneNo: "",
      address: "",
    };
  }
  login(e) {
    const db = fire.firestore();
    e.preventDefault();
    fire
      .auth()
      .createUserWithEmailAndPassword(this.state.email, this.state.pwd)
      //   .signInWithEmailAndPassword(this.state.email, this.state.pwd)
      .then((u) => {
        // console.log(u.user.uid);
        return db.collection("createdUsers").doc(u.user.uid).set({
          email: this.state.email,
          name: this.state.name,
          phoneNo: this.state.phoneNo,
          address: this.state.address,
        });
      })
      .then(() => {
        alert("Successfully Created the user!");
      })
      .catch((error) => {
        alert(error);
      });
    this.setState({
      email: "",
      pwd: "",
      name: "",
      phoneNo: "",
      address: "",
    });
  }
  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }
  render() {
    return (
      <Container style={{ margin: 0, padding: 0, maxWidth: 1366 }}>
        <Row>
          <Col>
            <div>
              <Form style={{ width: 300, height: 300, margin: "0 auto" }}>
                <Form.Group controlId="formBasicEmail">
                  <Form.Label>Username</Form.Label>
                  <Form.Control
                    type="email"
                    placeholder="Enter your email"
                    id="email"
                    name="email"
                    placeholder="Enter your email address"
                    onChange={this.handleChange}
                    value={this.state.email}
                    required
                  />
                </Form.Group>

                <Form.Group controlId="formBasicPassword">
                  <Form.Label>Password</Form.Label>
                  <Form.Control
                    type="password"
                    placeholder="Password"
                    id="pwd"
                    name="pwd"
                    placeholder="Password"
                    onChange={this.handleChange}
                    value={this.state.pwd}
                    required
                  />
                </Form.Group>
                <Form.Group controlId="formBasicInput1">
                  <Form.Label>Name</Form.Label>
                  <Form.Control
                    type="text"
                    placeholder="Name"
                    id="name"
                    name="name"
                    placeholder="Name"
                    onChange={this.handleChange}
                    value={this.state.name}
                    required
                  />
                </Form.Group>
                <Form.Group controlId="formBasicInput2">
                  <Form.Label>Phone Number</Form.Label>
                  <Form.Control
                    type="text"
                    placeholder="Phone Number"
                    id="phoneNo"
                    name="phoneNo"
                    onChange={this.handleChange}
                    value={this.state.phoneNo}
                    required
                  />
                </Form.Group>
                <Form.Group controlId="formBasicInput3">
                  <Form.Label>Address</Form.Label>
                  <Form.Control
                    type="text"
                    placeholder="Address"
                    id="address"
                    name="address"
                    onChange={this.handleChange}
                    value={this.state.address}
                    required
                  />
                </Form.Group>

                <Button variant="primary" type="submit" onClick={this.login}>
                  Create User
                </Button>
              </Form>
            </div>
          </Col>
        </Row>
      </Container>
    );
  }
}

在上面的代碼中，我有自定義字段以及 email ID 和密碼，創建用戶后，自定義字段中的值不會存儲在 firestore 集合中。 它也沒有創建集合。 React firebase 自定義字段身份驗證創建用戶未將自定義字段存儲在 Firestore 數據庫集合中。

Answer 1

this.setState({
      email: "",
      pwd: "",
      name: "",
      phoneNo: "",
      address: "",
    });

似乎重新加載您的頁面並停止異步集合更新。

您應該在db.collection("createdUsers")完成后重置您的 state。

也許在alert("Successfully Created the user;"); （在決賽中）