如何在反应中保存登录的用户电子邮件

Question

我有这个登录 API。我不想以状态或其他方式保存登录用户的电子邮件。所以我可以在登录后在 header 上显示它。用户电子邮件位于 data.email .

login.tsx

    const LoginAuth = async (data: AuthenticationProps) => {
        await axios.post(baseURL + `client/auth/login`,
        {
            email: data.email,
            password: data.password,
        },
        {
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
            }
        }
        )
        .then((res) => {
            if(res.status === 200) {
                router.push("/Home");
            }
        }, (err) => {
            console.log(err);
        })
        
    }
    return {
        LoginAuth,
    }
}

Answer 1

您可以使用 Context API，并将整个 React 应用包装在其中。这样您就可以从应用中的任何位置访问这些详细信息。
Context API doc

Answer 2

有几种方法可以实现这一点：

1. 您可以简单地拥有一个可访问的状态，但很可能您正在使用不同的组件：
2. 您可以雇用useContext。这将允许共享状态
3. 如果您希望电子邮件在会话之间保持不变，那么您可以使用本地存储并在应用程序启动时设置上下文。