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

我有这张用于登录的React Formik表单

我正在使用Firebase登录用户

为了进行测试，我包含了两个console.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;

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

const LoginForm = () => {
    const [loggedIn, setLogin] = useState(false);

    useEffect( () =>  console.log("my login status", loggedIn), [loggedIn]);

    // other logic...

---

但你真的登录了吗？console.log将首先打印，因为它是同步的。因此，它只是打印出最后一个状态吗？@tsecheukfung01是的，当使用Firebase事件控制台时，我可以看到自己登录。