React：尝试使用 firebase.auth uid 创建自定义 firebase db.collection

Question

我无法将 uid 传递给我的 db.collectionn('') 函数。 我究竟做错了什么？ 这是我的注册组件

import React, {useRef, useState} from 'react';
import Grid from "@material-ui/core/Grid";
import SimpleReactValidator from "simple-react-validator";
import {toast} from "react-toastify";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import {Link, useNavigate} from "react-router-dom";
import { useAuth } from '../../context/AuthContext';
import { db } from '../../firebase/firebase';
import './style.scss';

const SignUpPage = (props) => {

    const { signUp, currentUser } = useAuth();    
    const push = useNavigate();
    //const passwordConfirmRef = useRef()
    const [error, setError] = useState('');
    const [buttonVisibility, setButtonVisibility] = useState(false);
    const [value, setValue] = useState({});

    const submitForm = async (e) => {
        e.preventDefault();
        passwordMatch();
        /*if (validator.allValid()) {
            setValue({
                email: '',
                full_name: '',
                password: '',
                confirm_password: '',
            });*/
            //validator.hideMessages();
            //success
            try{
                if (textValidator.allValid()) {               
                setError('');
                setButtonVisibility(true);
                console.log('passed email ' + value.email + 'passed password ' + value.password)
                let specialuuId = await signUp(value.email, value.password);
                console.log('auth created');                
                console.log('SignUp currentUser.uid#### ' + specialuuId);                
                await db.collection('usersCollection').document(specialuuId).setData({
                    email: value.email,
                    firstName: value.first_name,
                    lastName: value.last_name
                });
                console.log('db linked');
                setValue({
                    first_name: '',
                    last_name_name: '',
                    email: '',
                    password: '',
                    confirm_password: '',
                });
                toast.success('Registration Complete successfully!');             
                push('/login');           
                }
                } catch {
                    toast.error('Failed to create an account');               
            }
            setButtonVisibility(false);
        };

这是我的 AuthContext cmp

import { useEffect, useState, createContext, useContext } from "react";
import   { auth } from '../firebase/firebase';

const formatAuthUser = (user) => ({
    uid: user.uid,
    email: user.email,
    displayName: user.displayName
  });

const AuthContext = createContext({
    authUser: null,
    loading: true,
    signUp: async () => {}
}) 

export const useAuth = () => useContext(AuthContext);

export function AuthProvider({children}) {

    const [currentUser, setCurrentUser] = useState();
    const [loading, setLoading] = useState(true);
    //const [userId, setUserId] = useState('');

    const authStateChanged = async (authState) => {
        if (!authState) {
            setCurrentUser(null);
            setLoading(false);
            return;
            }
        setLoading(true)
        var formattedUser = formatAuthUser(authState);
        setCurrentUser(formattedUser);    
        setLoading(false);
      };

    const signUp = async (email, password) => {
        let uuid;
        await auth.createUserWithEmailAndPassword(email, password)
        .then((user) =>{
        uuid = user.user.uid;
        console.log('uudi#### ' + uuid);
        return uuid;
        })
    }

    const signIn = (email, password) => {
        return auth.signInWithEmailAndPassword(email, password)
    }

    const signOut = () => {
        return auth.signOut();
    }
    
    useEffect(()=>{
        const unsubscribe = auth.onAuthStateChanged(authStateChanged)
        return unsubscribe;
    },[]);

    const value = {
        currentUser,
        loading,
        signIn,
        signUp,
        signOut,
    }

    return (
        <AuthContext.Provider value={value}>
            {!loading && children}
        </AuthContext.Provider>
    )
}

我看到我的 uuid 已在 AuthContext cmp 中建立，但它永远不会返回到 SignUp cmp 它在 console.log 中显示为未定义

我期待consolo.log在这里显示uuid

let specialuuId = await signUp(value.email, value.password);
console.log('auth created');                
console.log('SignUp currentUser.uid#### ' + specialuuId);      

Answer 1

您的注册函数始终返回未定义。这里的格式更正确：

const signUp = async (email, password) => {
    let uuid;
    await auth.createUserWithEmailAndPassword(email, password)
        .then((user) =>{
            uuid = user.user.uid;
            console.log('uudi#### ' + uuid);
            return uuid;
        })

回调中的

return

未从注册返回。它从您传递给

then

的回调函数返回。没有任何东西从

signUp

返回任何值，这就是为什么你总是得到未定义的原因。

由于您使用的是 async/await，因此根本不需要使用

then

。事实上，将 then 与 async/await 混合使用几乎总是一个编程错误。改为这样做：

const signUp = async (email, password) => {
    const user = await auth.createUserWithEmailAndPassword(email, password)
    const uuid = user.user.uid;
    console.log('uudi#### ' + uuid);
    return uuid;
}