导航时重置 useGlobalState

Question

所以我使用全局状态来存储用户是否登录以及他的图像。我使用 loggedIn 来显示或隐藏菜单和通知按钮，并使用图像路径获取用户图像。这是我的 GlobalStates.js 文件：

import {createGlobalState} from 'react-hooks-global-state'

const {setGlobalState, useGlobalState} = createGlobalState({
    loggedIn: false,
    image: "Loading",
});
export {useGlobalState, setGlobalState};

这是我的 App.js:

const [loggedIn] = useGlobalState("loggedIn")
const [imagePath] = useGlobalState("image")

然后我使用这些变量来执行各种操作。这在我登录时非常有效，但是，当我导航到任何其他页面时，全局变量重置为其初始值：false 和“加载”

奖励问题：如何在同一行中设置登录和图像路径变量

Answer 1

您必须将变量保存在会话存储中并将其恢复为初始状态。

举个例子

import React, { useEffect } from 'react';

import { createGlobalState } from 'react-hooks-global-state';

const initialStateSaved =  window.sessionStorage.getItem("reducer") && JSON.parse( window.sessionStorage.getItem("reducer"));

const initialState = {
  loggedIn: false,
  image: "Loading",
};

const { setGlobalState, useGlobalState } = createGlobalState(initialStateSaved || initialState);

function Question25() {

  const [loggedIn] = useGlobalState("loggedIn")

  useEffect(() => {
    if (!loggedIn) {
      // login

      const nextState = {
        image: 'zaquielverse',
        loggedIn: true,
      }

      setGlobalState('image', nextState.image);
      setGlobalState('loggedIn', nextState.loggedIn);

      window.sessionStorage.setItem("reducer", JSON.stringify(nextState));
    }
  }, []);

  return (
    <div>Question25</div>
  );
}

export default Question25;

我给你第二个例子“createStore”

import React, { useEffect } from 'react';

import { createStore, createGlobalState } from 'react-hooks-global-state';

const initialStateSaved = window.sessionStorage.getItem("reducer") && JSON.parse(window.sessionStorage.getItem("reducer"));

const initialState = {
  loggedIn: false,
  image: "Loading",
};

const reducer = (state, newState)  => {
  window.sessionStorage.setItem("reducer", JSON.stringify(newState));
  return newState;
}

const store = createStore(reducer, initialStateSaved || initialState);

const { useStoreState, dispatch } = store;

function Question25() {

  const loggedIn = useStoreState('loggedIn');

  useEffect(() => {
    if (!loggedIn) {
      dispatch({
        image: 'zaquielverse',
        loggedIn: true,
      });
    }
  });

  return (
    <div>Question25</div>
  );
}

export default Question25;

希望这些例子对你有用（你可以复制粘贴看看效果如何！）

导航时重置 useGlobalState

useGlobalState resetting when I navigate

reactjs

global-variables