时间戳

首页 > 解决方案 > 反应登录表单未正确保存状态

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;

标签： reactjsfirebasereact-hooksformik

解决方案

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

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

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

    // other logic...

推荐阅读