javascript - 如何在firebase react js中向经过身份验证的用户添加集合？

Question

我正在尝试通过 uid 向经过身份验证的用户添加一个集合。我用useState存储uid，但是当我将它传递给数据库时，它会返回“”。如果我在那里硬编码一些东西，它工作正常。在控制台日志中，我可以看到状态中的 uid，但在提交时，它会提交“”我是新来的反应，所以任何信息都将不胜感激。

import React, { useState } from 'react';

import firebase from 'firebase';
import { db } from '../../firebase';

import Button from '@material-ui/core/Button';

import './SignUp.css';

function SignUp({ history }) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [checkPassword, setCheckPassword] = useState('');
    const [userId, setUserId] = useState('');

    console.log(userId);

    const handleSignUp = (e) => {
        e.preventDefault();

        if (password !== checkPassword) {
            return alert('Passwords do not match');
        }

        if (!password) {
            return alert('Please enter a password1');
        }

        firebase
            .auth()
            .createUserWithEmailAndPassword(email, password)
            .then((user) => {
                setUserId(user.user.uid);

                db.collection('Users').doc(userId).set({
                    email: user.user.email
                });

                alert('User Created');
                setEmail('');
                setPassword('');
                setCheckPassword('');
                history.push('/');
            })
            .catch((error) => alert(error));
    };

    return (
        <div className="signup">
            <div className="signup__title">Sign Up</div>
            <form onSubmit={handleSignUp}>
                <div className="signup__card">
                    <div className="signup__cardLabel">Email</div>
                    <div className="signup__cardInput">
                        <input
                            type="text"
                            placeholder="username"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                        />
                    </div>
                    <div className="signup__cardLabel">Password</div>
                    <div className="signup__cardInput">
                        <input
                            type="password"
                            placeholder="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />
                    </div>
                    <div className="signup__cardLabel">Check Password</div>
                    <div className="signup__cardInput">
                        <input
                            type="password"
                            placeholder="password"
                            value={checkPassword}
                            onChange={(e) => setCheckPassword(e.target.value)}
                        />
                    </div>
                    <div className="signup__button">
                        <Button
                            type="submit"
                            variant="contained"
                            color="primary"
                        >
                            Submit
                        </Button>
                    </div>
                </div>
            </form>
        </div>
     );
   }

  export default SignUp;

标签： javascriptreactjsfirebaseauthenticationgoogle-cloud-firestore

Answer 1

setUserId(userId)是异步的，所以当你运行时它可能没有完成db.collection('Users').doc(userId).set()。

在您的情况下（至少我可以看到的代码），您不需要将您的 userId 放入您的状态。

只是运行db.collection('Users').doc(user.user.id).set()。