在 Firebase 中注册 身份验证返回 null 用于 React 应用程序中的 displayName

Question

我最近开始学习Firebase Authentication ，现在我想在 React 应用程序中实现它。

当signup and signin在 Auth 组件中时，该应用程序可以与 Firebase Auth signup and signin一起正常工作。 但是现在我在他们自己的组件中分离了signup and signin ，并且应用程序中断了。

问题发生在用户注册后。 即displayName为 null。 但是如果我当时刷新页面，那么它就不再是 null 了。

这是我注册时的结果：

这是代码：

认证组件：

const Auth = ( props ) => {
    
    const [ user, setUser ]                         = useState(null);
    const [ displayName, setDisplayName ]           = useState(null);
    
    useEffect(() => {

        const unsubscribe = auth.onAuthStateChanged((authUser) => {
            if (authUser) {
                
                console.log('user object FROM AUTH.js ', authUser);
                console.log('displayName FROM AUTH.js ', authUser.displayName);

                setDisplayName(authUser.displayName);
                setUser(authUser);

            } else {
                
                setDisplayName(null);
                setUser(null);

            }
        });

        return () => {
            
            unsubscribe();

        };
    }, [user]);


    const signOut = () => {
        setUser(null);
        auth.signOut();
    };

    const modalShow = (action, type) => {
        if ( type === "Signin" ) {
            return setModalShowSignIn(action);
        }else if ( type === "Signup") {
            return setModalShowSignUp(action);
        }
    }

    return (
        <div>
            
            <Signup modal={modalShow} modalState={modalShowSignUp} />
            <Signin modal={modalShow} modalState={modalShowSignIn} />

        </div>
    );
};

注册.js

const Signup = ( props ) => {

    const [ fullName, setFullName ]                 = useState('');
    const [ password, setPassword ]                 = useState('');
    const [ email, setEmail ]                       = useState('');
    const [ url, setURL ]                           = useState('');

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

        auth
            .createUserWithEmailAndPassword(email, password)
            .then((authUser) => {
                props.modal(false);
                return authUser.user.updateProfile({
                    displayName: fullName,
                    photoURL: url,
                });
            })
            .catch((error) => alert(error.message));
    };

    const modalClose = () => {
        props.modal(false, "Signup");
    };

    return (
        <>
            <div>

                <form onSubmit={signUp} >

                    <input
                        type='text'
                        value={fullName}
                        onChange={(e) => setFullName(e.target.value)}
                    />
                        
                    <input
                        type='url'
                        value={url}
                        onChange={(e) => setURL(e.target.value)}
                    />
                        
                    <input
                        type='email'
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                    />

                    <input
                        type='password'
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                    />

                    <button type='submit'>Sign Up</button>
                </form>
            </div>

        </>
    );
};

这里可能是什么问题？

Answer 1

您想在 promise 填充之前设置响应。 您应该使用任何异步等待方法，或者将 useState 方法放在 then 方法中。

    const unsubscribe = auth.onAuthStateChanged().then((res) => {

                if (res) {
                
                console.log('user object FROM AUTH.js ', res);
                console.log('displayName FROM AUTH.js ', res.displayName);

                setDisplayName(res.displayName);
                setUser(res);

            } else {
                
                setDisplayName(null);
                setUser(null);

            }

})