React:在loginHandler函数中通过State钩子向localStorage添加令牌不工作

Question

我已经在我的React应用中创建了一个AuthContextProvider用于登录/注销功能:

import React, { useState } from "react";
import axios from "axios";
import { api } from "../api";
const AuthContext = React.createContext({
token: "",
isLoggedIn: false,
login: () => {},
logout: () => {},
});
export const AuthContextProvider = (props) => {
const initialToken = localStorage.getItem("token");
const [token, setToken] = useState(initialToken);
const userIsLoggedIn = !!token;
const loginHandler = (email, password) => {
return axios
.post(api.auth.login, {
email,
password,
})
.then((res) => {
setToken(res.data.key);
localStorage.setItem("token", token)
// localStorage.setItem("token", res.data.key)
});
};
const logoutHandler = () => {
setToken(null);
localStorage.removeItem("token")
};
const contextValue = {
token: token,
isLoggedIn: userIsLoggedIn,
login: loginHandler,
logout: logoutHandler,
};
return (
<AuthContext.Provider value={contextValue}>
{props.children}
</AuthContext.Provider>
);
};
export default AuthContext;

在我的loginHandler中，我试图通过localStorage.setItem("token", token)将从后端接收到的令牌添加到localStorage，但这总是为localStorage中的令牌值提供null。当我通过localStorage.setItem("token", res.data.key)添加令牌时，我设法在localStorage中获得实际令牌。我不明白为什么第一种方法不起作用，因为我通过setToken(res.data.key)在上面一行正确地设置了token。

欢迎指教

Answer 1

问题是setState()是异步的。React不保证状态更改会立即应用。如果希望在对状态变量设置状态后立即执行操作，则需要将回调函数传递给setState函数。因为在函数式组件中，useState钩子不允许这样的回调，所以你可以使用useEffect钩子来实现它。

这里有完整的解释如何做到这一点。