useEffect не слушайте localStorage

Question

Я делаю систему аутентификации и после того, как бэкэнд перенаправляет меня на страницу веб-интерфейса, я делаю запрос API для userData и сохраняю эти данные в localStorage. Затем я пытаюсь загрузить Spinner или UserInfo.

Я пытаюсь прослушать значение localStorage с помощью useEffect, но после входа в систему я получаю 'undefined'. Когда значение localStorage обновлено, useEffect не запускается снова, а Spinner продолжает вращаться вечно.

Я попытался сделать: JSON.parse(localStorage.getItem('userData')), и тогда я получил useEffect Infinitive l oop.

Only когда я обновляю страницу, появляются значения localStorage и я могу отображать их вместо Spinner

Что я делаю не так?

Может быть, есть лучший способ загрузить userData, когда он будет готов?

Я пытаюсь корректно обновить DOM?

Спасибо за ответы;)

import React, { useState, useEffect } from 'react';
import { Spinner } from '../../atoms';
import { Navbar } from '../../organisms/';
import { getUserData } from '../../../helpers/functions';

const Main = () => {
  const [userData, setUserData] = useState();
  useEffect(() => {
    setUserData(localStorage.getItem('userData'));
  }, [localStorage.getItem('userData')]);

  return <>{userData ? <Navbar /> : <Spinner />}</>;
};

export default Main;

Answer 1

Было бы лучше добавить прослушиватель событий для localalstorage здесь.

useEffect(() => {
  function checkUsetData() {
    const item = localStorage.getItem('userData')

    if (item) {
      setUserData(item)
    }
  }

  window.addEventListener('storage', checkUsetData)

  return () => {
    window.removeEventListener('storage', checkUsetData)
  }
}, [])

Answer 2

• "Может быть, есть лучший способ загрузить userData, когда он будет готов?"

Вы можете напрямую оценить значение в localStorage, вместо этого перейдя в состояние.

const Main = () => {
  if (localStage.getItem('userData')) {
    return (<Navbar />);
  }
  else {
    return (<Spinner />);
  }
};

Если необходимо извлечь userData в большем количестве компонентов, оцените реализацию Redux для вашего приложения, это может исключить использование localStorage, но, конечно, это зависит от ваших потребностей.