ReactJS: использование localStorage для сохранения разрывов данных с ошибкой Превышена максимальная глубина обновления

Question

У меня есть компонент Home, который я могу визуализировать различными способами в зависимости от состояния.

Я пытаюсь установить состояние Home из localStorage

/*
The AuthContext


const globalState = {
  email: null,
  token: null
};
*/

export default function Home() {

  const [user, setUser] = useContext(AuthContext);
  useEffect(() => {
    const token = localStorage.getItem('token') || null;
    const email = localStorage.getItem('email') || null;
    setUser({email, token});
  })

}

Эта ошибка продолжает появляться хотя и я не знаю, как ее решить

Превышена максимальная глубина обновления. Это может произойти, когда компонент вызывает setState внутри useEffect

Я попытался удалить useEffect, но выскочила другая ошибка

Превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate

Я знаю, что эта ошибка вызвана повторным вызовом setUser.

Но я не уверен, как вызвать setUser только один раз.

Answer 1

useEffect() вызывается всякий раз, когда отображается элемент, и это происходит, когда вы устанавливаете setState. Добавьте пустые массивы зависимостей в блок useEffect. Это позволит блокировать запуск только при начальном рендеринге.

const [user, setUser] = useContext(AuthContext);
useEffect(() => {
  const token = localStorage.getItem('token') || null;
  const email = localStorage.getItem('email') || null;
  setUser({email, token});
}, [])

Поскольку это должно происходить только один раз, а useState немного избыточен, вы можете получить тот же результат с useMemo. Это немного меньше идиоматизма c, потому что получение данных из localStorage является побочным эффектом, но в таком случае это проще.

const user = useMemo(() => {
  const token = localStorage.getItem('token') || null;
  const email = localStorage.getItem('email') || null;

  return { email, token };
}, [])