Javascript 更新会话存储时，UseMoom不起作用

我有一个应用程序的标题包含图标，应该显示在用户登录时。我将我的登录信息保存在会话存储中，但当它更改时，我的组件不会再次呈现。我试着用

useffect

和

usemo

来做这件事，但是没有用

更新部分：

const isLoggedIn = useMemo(() => sessionStorage.getItem('isLogged'), [sessionStorage.getItem('isLogged')]);

用法：

      {isLoggedIn === 'true' ? ['left'].map((anchor) => (
        ...some jsx
      )) : null}

sessionStorage

值是一个字符串：“false”或“true”

---

我有routes和constant header，header不是routes的一部分，因此当它更改时，我的header不是Reenders，因此我尝试使用useMemo。sessionStorage不是observer对象，您必须将当前身份验证状态存储到变量或React状态中，并在组件中使用该变量。当您对用户进行身份验证时，您应该将变量更新为

true

，并在用户注销时将其更改为

false

。 要实现我所说的，您可以通过以下方式获得帮助：

重演

反应上下文

---

您可以自己从头开始实现React上下文，或者使用sessionStorage不是observer对象，您必须将当前身份验证状态存储到变量或React状态中，并在组件中使用该变量。当您对用户进行身份验证时，您应该将变量更新为

true

，并在用户注销时将其更改为

false

。 要实现我所说的，您可以通过以下方式获得帮助：

重演

反应上下文

---

您可以自己从头开始实现React上下文，也可以使用

UseMoom用于记忆计算值。您应该使用useCallback。useCallback用于记忆函数引用。 提及

---

UseMoom用于记录计算值。您应该使用useCallback。useCallback用于记忆函数引用。 提及

---

根据通过评论获得的澄清发布我的答案

如果您使用的是

Redux

：

我建议将登录信息存储在

redux store

中，并通过connectHOC和

MapStateTrops

连接到隔离头组件。每当您更新（用户登录成功后）用户登录状态时，组件将侦听

存储

更新

或

如果未使用

redux

，则可以使用React

context

方法

// Declare it outside of your App component/any other file and export it
const GlobalState = React.createContext();


// Declare state variable to store user logged in info inside of your App component
const [isLoggedIn, setIsLoggedIn] = useState(false);

// Add them to context to access anywhere in your components via useContext
// In App render or where you have route mapping
<GlobalState.Provider value={{
  isLoggedIn,
  setIsLoggedIn
}}>
  ....
</GlobalState.Provider>

// Update the status using setIsLoggedIn upon successful login where you are making login call

// In your Header get it via useContext
const context = useContext(GlobalState);

`context.isLoggedIn` is what you need.

// You can use useEffect/useMemo approach to get the login status updates

//在应用程序组件/任何其他文件之外声明并导出它
const GlobalState=React.createContext（）；
//声明状态变量以在应用程序组件中存储用户登录信息
const[isLoggedIn，setIsLoggedIn]=useState（false）；
//将它们添加到上下文中，以便通过useContext访问组件中的任何位置
//应用程序内渲染或具有路由映射的位置
....
//在进行登录调用的成功登录后，使用setIsLoggedIn更新状态
//在标题中，通过useContext获取它
const context=useContext（GlobalState）；
`这就是你需要的。
//您可以使用useffect/usemo方法获取登录状态更新

---

查找更多信息，并根据通过评论获得的澄清发布我的答案

如果您使用的是

Redux

：

我建议将登录信息存储在

redux store

中，并通过connectHOC和

MapStateTrops

连接到隔离头组件。每当您更新（用户登录成功后）用户登录状态时，组件将侦听

存储

更新

或

如果未使用

redux

，则可以使用React

context

方法

// Declare it outside of your App component/any other file and export it
const GlobalState = React.createContext();


// Declare state variable to store user logged in info inside of your App component
const [isLoggedIn, setIsLoggedIn] = useState(false);

// Add them to context to access anywhere in your components via useContext
// In App render or where you have route mapping
<GlobalState.Provider value={{
  isLoggedIn,
  setIsLoggedIn
}}>
  ....
</GlobalState.Provider>

// Update the status using setIsLoggedIn upon successful login where you are making login call

// In your Header get it via useContext
const context = useContext(GlobalState);

`context.isLoggedIn` is what you need.

// You can use useEffect/useMemo approach to get the login status updates

//在应用程序组件/任何其他文件之外声明并导出它
const GlobalState=React.createContext（）；
//声明状态变量以在应用程序组件中存储用户登录信息
const[isLoggedIn，setIsLoggedIn]=useState（false）；
//将它们添加到上下文中，以便通过useContext访问组件中的任何位置
//应用程序内渲染或具有路由映射的位置
....
//在进行登录调用的成功登录后，使用setIsLoggedIn更新状态
//在标题中，通过useContext获取它
const context=useContext（GlobalState）；
`这就是你需要的。
//您可以使用useffect/usemo方法获取登录状态更新

---

查找有关和的更多信息

能否尝试将

会话存储

数据置于

状态

并更新该状态？据我所知，react不知道会话存储。因此，即使您更改了操作会话存储中的数据，它也不会更新您的UI

let [storeData, setStoreData] = useState(true);

let isLoggedIn = useMemo(() => ({ sessionData: storeData }), [storeData]);

 {isLoggedIn === 'true' ? ['left'].map((anchor) => (
    ...some jsx
  )) : null}


 <button
   onClick={() => {
      sessionStorage.setItem("isLogged", !storeData);
      setStoreData(sessionStorage.getItem("isLogged"));
   }} > Update Store </button>

let[storeData，setStoreData]=useState（true）；
让isLoggedIn=usemo（（）=>（{sessionData:storeData}），[storeData]）；
{isLoggedIn=='true'？['left'].map（（锚定）=>(
…一些jsx
))：null}
{
sessionStorage.setItem（“isLogged”，！storeData）；
setStoreData（sessionStorage.getItem（“IsLoged”）；
}}>更新存储

能否尝试将

会话存储

数据置于

状态

并更新该状态？据我所知，react不知道会话存储。因此，即使您更改了操作会话存储中的数据，它也不会更新您的UI

let [storeData, setStoreData] = useState(true);

let isLoggedIn = useMemo(() => ({ sessionData: storeData }), [storeData]);

 {isLoggedIn === 'true' ? ['left'].map((anchor) => (
    ...some jsx
  )) : null}


 <button
   onClick={() => {
      sessionStorage.setItem("isLogged", !storeData);
      setStoreData(sessionStorage.getItem("isLogged"));
   }} > Update Store </button>

let[storeData，setStoreData]=useState（true）；
让isLoggedIn=usemo（（）=>（{sessionData:storeData}），[storeData]）；
{isLoggedIn=='true'？['left'].map（（锚定）=>(
…一些jsx
))：null}
{
sessionStorage.setItem（“isLogged”，！storeData）；
setStoreData（sessionStorage.getItem（“IsLoged”）；
}}>更新存储

在没有像

const isLoggedIn=sessionStorage.getItem（'isLogge'）这样的
usemo的情况下直接使用它有什么问题吗