为什么设置本地存储项后我的状态为空？

Question

我的状态有问题，我正在尝试从本地存储获取一个项目并将其设置为我的状态，但是当我记录我的状态时它是空的，并且我确保本地存储项目具有值

这就是我正在尝试的，但是当我记录令牌时它是空的，但是属性调用 _token 它具有值

export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({children})=>{
    const [token, setToken] = useState<string>("");
    
    useEffect(()=>{
        const _token:string | null = localStorage.getItem("token");
        if(_token){
            setToken(_token);
            console.log("token ", token);
        }
    },[]);
    return token ? children : <Navigate to={"/sign-in"}/>
}

Answer 1

当您调用 setToken(_token) 时，令牌状态不会立即更新。结果，console.log(“token”, token); useEffect 钩子内部记录 token 的初始值（这是一个空字符串）而不是更新后的值。 你应该使用另一个 useEffect 来监听 token 的变化。

const [token, setToken] = useState<string>("");

    useEffect(() => {
        const _token: string | null = localStorage.getItem("token");
        if (_token) {
            setToken(_token);
        }
    }, []);

    useEffect(() => {
        console.log("token ", token);
    }, [token]);

    return token ? children : <Navigate to={"/sign-in"} />;