为什么 sessionStorage 不更新 React 中的页面？

Question

我正在 React 中实现基本登录，但是当令牌保存在 sessionStorage 中时，页面不会像我使用挂钩那样正常刷新。

我使用此组件保存并 return 登录正确时的令牌。

//UseToken.js
import { useState } from 'react';

export default function useToken() {
  const getToken = () => {
    const tokenString = sessionStorage.getItem('token');
    const userToken = JSON.parse(tokenString);
    return userToken
  };

  const [token, setToken] = useState(getToken());

  const saveToken = userToken => {
    sessionStorage.setItem('token', JSON.stringify(userToken));
    setToken(userToken.token);
  };

  return {
    setToken: saveToken,
    token
  }
}

稍后，在应用程序组件中，我请求令牌的状态以呈现登录视图或应用程序视图。

//App.js
const {token, setToken} = useToken();

  if(!token) {
    return <Login setToken={setToken} />
  }

然后将令牌保存在 sessionStorage 中，但仍会呈现登录。

帮助

Answer 1

答案是，当您设置令牌时，您将其设置为一个不存在的对象，而不是仅仅将值传递给它。

const saveToken = userToken => {
   sessionStorage.setItem('token', JSON.stringify(userToken));
   setToken(userToken); // instead of userToken.token
 };

为什么 sessionStorage 不更新 React 中的页面？

Why sessionStorage not update the page in React?

javascript

session-storage

reactjs