React 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>
);
}
}

在上面的代码中，我有自定义字段以及电子邮件ID和密码，并且在创建用户后，自定义字段中的值不会存储在Firestore集合中。它也不会创建集合。React Firebase 自定义字段身份验证创建用户未将自定义字段存储在 Firestore 数据库集合中。

Answer 1

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

似乎重新加载您的页面并停止异步集合更新。

您应该在db.collection("createdUsers")完成后重置您的状态。

也许在alert("Successfully Created the user!");之前(在决赛中(