为什么我不能在三元 if 语句中访问 auth.currentUser？反应，火力基地

Question

我的目标是在用户登录时显示退出按钮，如果没有登录则显示登录按钮。

如果我使用这个代码，auth。currentUser是可访问的:

const JoinCard = () => {
const auth = getAuth(app);
const [user] = useAuthState(auth);
const usersRef = collection(db, "users");
const signInWithGoogle = async (e) => {
e.preventDefault();
const provider = new GoogleAuthProvider();
signInWithPopup(auth, provider)
.then((result) => {
console.log(result);
console.log(auth.currentUser);
})
.catch((error) => {
console.log(error);
});
const { uid, photoURL, displayName } = auth.currentUser;
await addDoc(usersRef, {
uid: uid,
photoURL: photoURL,
displayName: displayName,
});
};
return (
<div className="w-[85vw] h-[30vh] m-2 rounded-2xl drop-shadow-xl flex justify-center items-center p-2 bg-white/75">
<button className="sign-in" onClick={signInWithGoogle}>
Sign in with Google
</button>
</div>
);
};
function SignOut() {
return (
auth.currentUser && (
<button className="sign-out" onClick={() => auth.signOut()}>
Sign Out
</button>
)
);
}
export default JoinCard;

但是，如果我将SignIn按钮放在一个三进制中，auth。currentUser现在为空。为什么呢?

return (
<div className="w-[85vw] h-[30vh] m-2 rounded-2xl drop-shadow-xl flex justify-center items-center p-2 bg-white/75">
{user ? (
<SignOut />
) : (
<button className="sign-in" onClick={signInWithGoogle}>
Sign in with Google
</button>
)}
</div>
);
};
);

Answer 1

Firebase在大多数浏览器环境中自动保留用户凭据，并在页面/应用程序重新加载时恢复它们。这要求它对服务器进行调用，但是，例如检查帐户是否被禁用。这意味着在初始加载时，currentUser变量将是null，因为对服务器的(异步)调用尚未完成。

useAuthState钩子包装了一个认证状态监听器，您可以在获取当前用户的文档的第一个代码片段中看到。这个结构确保你的代码可以响应认证状态的变化，这与ReactJS的响应性非常吻合。

因此，如果你想确保你的应用程序显示当前用户状态，请确保始终响应useAuthState钩子-或直接使用认证状态更改监听器。