反应登录表单未正确保存状态

Question

我有这个 React Formik 表单用于登录。

我正在使用 Firebase 登录用户。

为了进行测试，我包括两个控制台.log命令，一个在登录之前，一个在登录后，以显示登录状态的当前值。

加载表单时，我按预期看到以下控制台消息：

登录之前 - 我是否登录？ 假

然后我输入我的电子邮件和密码并点击登录。

我首先看到此控制台消息，这对我来说很奇怪，因为它是 BEFORE 消息：

登录之前 - 我是否登录？ 真

但随后它说我没有再次登录并显示此消息：

登录后 -- 我是否登录？ 假

所以它看起来正在工作，但我不确定为什么它在说真之后又说假了。

我觉得我有些不正常，或者我没有将状态设置在正确的位置，但我无法弄清楚发生了什么。

我做错了什么吗？

谢谢！

这是我的表格：

const LoginForm = () => {
const [loggedIn, setLogin] = useState(false);
console.log("BEFORE logging in -- Am I logged in? ", loggedIn);
return (
<>
<h1>Game List Login Form</h1>
<Formik
initialValues={{
password: '',
email: ''
}}
onSubmit={(values, actions) => {
setTimeout(() => {
//alert(JSON.stringify(values, null, 2));
firebase.auth().signInWithEmailAndPassword(values.email, values.password).catch(function (error) {
var errorCode = error.code;
var errorMessage = error.message;
});
actions.setSubmitting(false);
setLogin(true);
console.log("AFTER logging in -- Am I logged in? ", loggedIn);
}, 1000);
}}
>
<Form>
<MyTextInput
label="Email Address"
name="email"
type="email"
/>
<MyTextInput
label="Password"
name="password"
type="password"
/>
<br />
<Button type="submit">
Login
</Button>
</Form>
</Formik>
</>
);
};
export default LoginForm;

Answer 1

使用useEffect来检查某些内容是否实际更新，因为此钩子函数将在渲染后触发

const LoginForm = () => {
const [loggedIn, setLogin] = useState(false);
useEffect( () =>  console.log("my login status", loggedIn), [loggedIn]);
// other logic...