Question

我已经使用createUserWithEmailAndPassword在Firebase上运行我的React.js网络应用程序，但是现在我想在用户注册时附加用户的其他信息，而不是他们的电子邮件和密码（例如，名字，姓氏，和电话）。到目前为止，所附加的当前代码是我的逻辑，但是无法正常工作，因为我认为我需要与其他信息对应的userId尚无法访问。

向我的Firebase推送中添加其他用户信息的最佳方法是什么？我还应该使用createUserWithEmailAndPassword吗？一旦在oauth中为用户生成了ID，我可能需要创建一个容器组件来执行writeUserData功能。

Register.js：

import React, { Component } from 'react';
import fire from '../../config/Fire.js';
import { Link, withRouter } from 'react-router-dom';
import PasswordMask from 'react-password-mask';

class Register extends Component {
    constructor(props) {
      super(props)
      this.signup = this.signup.bind(this);
      this.writeUserData = this.writeUserData.bind(this);
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.state = {
        first_name: 'Taylor',
        last_name: 'Doe',
        email: 'you@mail.com',
        phone: '1234567890',
        password: ''
      };
    }

    handleChange(e) {
        this.setState({ [e.target.name]: e.target.value });
    }

    handleSubmit(e) {
        e.preventDefault();
    }

    signup(e){
        e.preventDefault();
        // We want this directing else where, but am getting an error when done so
        fire.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then((u)=>{ this.props.history.push('/about') }).catch((error) => {
            alert(error);
            });
    }

    writeUserData(userId, first_name, last_name, email, phone) {
        fire.database().ref('users/' + userId).set({
            userFirstName: first_name,
            userLastName: last_name,
            userEmail: email,
            userPhone : phone
        });
    }

    render() {
      return (
            <div className="m-container">
            <h1>Register</h1>
            <hr/>
            <div className="m-container">
                <form onSubmit={this.submitForm}>
                <label for="first-name">First Name: </label>
                <br/>
                <input 
                    onChange={this.handleChange} 
                    type="text" 
                    name="first_name" 
                    id="first-name" 
                    placeholder="Taylor"
                    />
                <br/>
                <label for="first-name">Last Name: </label>
                <br/>
                <input 
                    onChange={this.handleChange} 
                    type="text" 
                    name="last_name" 
                    id="last-name" 
                    placeholder="Doe"
                    />
                <br/>
                <label for="email">Email: </label>
                <br/>
                <input 
                    onChange={this.handleChange} 
                    type="text" 
                    name="email" 
                    id="email" 
                    placeholder="you@mail.com"
                    />
                <br/>
                <label for="phone">Phone: </label>
                <br/>
                <input 
                    onChange={this.handleChange} 
                    type="text" 
                    name="phone" 
                    id="phone" 
                    placeholder="1234567890"
                    />
                <br/>
                <div>
                    <label for="password">Password: </label>
                    <br/>
                    {/* Margin issue when showing and hiding password */}
                    <PasswordMask 
                    onChange={this.handleChange} 
                    type="password" 
                    name="password" 
                    id="password" 
                    placeholder="**********"
                    />
                </div>
                <br/>

                <button 
                    type="submit" 
                    className="m-btn" 
                    onClick={this.signup && this.writeUserData(this.user.id, this.first_name, this.last_name, this.email, this.phone)}>Register</button>
                &nbsp;
                <Link className="m-btn-inv" to="/login">Login</Link>
                </form>
            </div>
        </div>
        );
    }
  }

  export default withRouter(Register)

Answer 1

您可能正在寻找一个两步过程：

创建新用户
将其他信息写入数据库

由于这是一个分为两个步骤的过程，因此您希望步骤2仅在步骤1成功的情况下才发生。因此，您可能应该将调用嵌套或链接在一起。像这样：

signup(e){
    e.preventDefault();
    // We want this directing else where, but am getting an error when done so
    fire.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
      .then((u) => { 
        this.props.history.push('/about');
        writeUserData(u.user.uid, this.first_name, this.last_name, this.email, this.phone);
      })
      .catch((error) => {
        alert(error);
      });
}

writeUserData(userId, first_name, last_name, email, phone) {
    fire.database().ref('users/' + userId).set({
        userFirstName: first_name,
        userLastName: last_name,
        userEmail: email,
        userPhone : phone
    });
}

然后使用以下命令将其连接到您的按钮中：

<button 
    type="submit" 
    className="m-btn" 
    onClick={this.signup}>Register</button>

将其他用户信息附加到Firebase推送

1 个答案: