[英]Why is my react state not changing properly?
I'm trying to authenticate using firebase in react.我正在尝试使用 firebase 进行身份验证。 This is the component that tracks my authentification state.
这是跟踪我的身份验证 state 的组件。
import { useState} from "react";
function useAuth(fbAuth) {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const createEmailUser = (email, password) => fbAuth.createUserWithEmailAndPassword(email, password);
const signInEmailUser = (email, password) => fbAuth.signInWithEmailAndPassword(email, password);
const signOut = fbAuth.signOut();
fbAuth.onAuthStateChanged(async user=> {
if (user) {
await setIsAuthenticated(true);
console.log(isAuthenticated, "should be true")
return
} else {
await setIsAuthenticated(false);
console.log(isAuthenticated, "should be false")
return
}
});
return {isAuthenticated, createEmailUser, signInEmailUser, signOut};
}
export default useAuth
The console logs when I click log in are我单击登录时的控制台日志是
2useAuth.js:13 false "should be true" 2useAuth.js:13 false “应该是真的”
2useAuth.js:17 false "should be false" 2useAuth.js:17 假“应该是假的”
2useAuth.js:17 true "should be false" 2useAuth.js:17 真“应该是假的”
4useAuth.js:17 false "should be false" 4useAuth.js:17 假“应该是假的”
The setIsAuthenticated
function does not return a promise, so using await
here doesn't really do anything. setIsAuthenticated
function 不返回 promise,所以在这里使用await
并没有真正做任何事情。 On top of that, the value of isAuthenticated
is never modified (calling setIsAuthenticated
doesn't change the value of the variable you already set at the beginning of the hook).最重要的是,永远不会修改
isAuthenticated
的值(调用setIsAuthenticated
不会更改您在挂钩开始时已经设置的变量的值)。 Basically, doing a console.log
within your onAuthStateChanged
function doesn't make sense and won't do what you expect.基本上,在
onAuthStateChanged
function 中执行console.log
没有任何意义,也不会达到您的预期。 If you want to get a better feel for what is happening, try putting a console.log
at the beginning of the function, and just print the fact that you expect it to change.如果您想更好地了解正在发生的事情,请尝试将
console.log
放在 function 的开头,然后打印您希望它会改变的事实。 So something like this:所以是这样的:
import { useState, useEffect } from "react";
function useAuth(fbAuth) {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const createEmailUser = (email, password) => fbAuth.createUserWithEmailAndPassword(email, password);
const signInEmailUser = (email, password) => fbAuth.signInWithEmailAndPassword(email, password);
const signOut = fbAuth.signOut();
console.log('isAuthenticated', isAuthenticated)
//I'm assuming you only need to register the fbAuth.onAuthStateChanged
//callback once. So We use useEffect with an empty array to have it
//only run the first time this is rendered.
useEffect(() => {
fbAuth.onAuthStateChanged(async user=> {
if (user) {
setIsAuthenticated(true);
console.log('isAuthenticated should be true after this')
} else {
setIsAuthenticated(false);
console.log('isAuthenticated should be false after this')
}
});
}, [])
return {isAuthenticated, createEmailUser, signInEmailUser, signOut};
}
export default useAuth
You would then expect然后你会期望
//Initial render
isAuthenticated false
//Click log-in
isAuthenticated should be true after this
isAuthenticated true
//Click log-out
isAuthenticated should be false after this
isAuthenticated false
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.