useMemo не работает при обновлении sessionStorage - PullRequest
Новая
       13

useMemo не работает при обновлении sessionStorage

0 голосов
/ 01 августа 2020

У меня есть приложение, заголовок которого содержит значок, который должен отображаться, когда пользователь вошел в систему. Я сохраняю информацию о входе в систему в sessionStorage, но когда она меняет, мой компонент больше не отображается. Я пытался использовать для этого useEffect и useMemo, но это не сработало.

Часть обновления: 

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

Использование: 

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

Значение sessionStorage представляет собой строку: «false» или «true».

У меня есть маршруты и постоянный заголовок, заголовок не является частью маршрутов, поэтому, когда он меняет, мой заголовок не перерисовывается, поэтому я пытался использовать для этого useMemo.

Ответы [ 4 ]

1 голос
/ 01 августа 2020

Публикация моего ответа в соответствии с разъяснениями, полученными в комментариях.

Если вы используете Redux:

, я бы рекомендовал сохранить информацию для входа в систему. в redux store и подключитесь к изолированному компоненту Header через connect HO C и mapStateToProps. Всякий раз, когда вы обновляете (после успешного входа пользователя) статус входа пользователя, компонент будет прослушивать store обновления.

или

Вы можете использовать подход React context если нет redux использовано 

// 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

Узнайте больше о React context и useContext

1 голос
/ 01 августа 2020

sessionStorage не является объектом-наблюдателем, и вы должны сохранить текущее состояние аутентификации в переменной или состоянии React и использовать эту переменную в своем компоненте. И когда вы аутентифицировали пользователя, вы должны обновить переменную до true и изменить это на false, когда пользователь вышел из системы. Чтобы реализовать то, что я сказал, вы можете получить помощь следующими способами:

  1. Redux
  2. React context

Вы можете реализовать контекст React самостоятельно с нуля или с помощью React-hooks-global-state

0 голосов
/ 01 августа 2020

Можете ли вы попробовать поместить свои sessionStorage данные в State и обновить это состояние? Насколько я знаю, react не будет знать о хранилище сессий. Так что даже если вы измените манипулирование данными в sessionStorage напрямую, он не обновит ваш пользовательский интерфейс. 

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>
0 голосов
/ 01 августа 2020

UseMemo используется для запоминания вычисленных значений. Вы должны использовать useCallback. UseCallback используется для запоминания ссылок на функции. См. это 

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