«Не удается выполнить обновление состояния React для неустановленного компонента», когда я пытаюсь изменить состояние в useEffect ()

Question

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

Это мой компонент:

Я получаю:

Невозможно выполнить обновление состояния React на отключенном компоненте. Это неоперация, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в функции очистки useEffect.

Как это исправить?

Answer 1

Невозможно выполнить обновление состояния React для неустановленного компонента.

Эта ошибка возникает при попытке изменить компонент, который еще не существует.

Это очень часто результат параллельной инициализации (asyn c) компонентов.

Например: Предположим, что два компонента A, B оба инициализируются асинхронно в строках 1, 2. В строке 3, если компонент A пытается обновить компонент B, существует вероятность что компонент B (строка 2) не был создан к моменту времени 3 (обновление до B) было выполнено.

В таком случае будет сообщено о вышеуказанной ошибке.

Как исправить? Определите и измените асиновые c кодовые блоки или функции, чтобы убедиться, что обновление компонента не предпринимается до его создания.

Answer 2

Измените useEffect следующим образом:

useEffect(() => {
  let neverMind = false;

  const currentUser = JSON.parse(localStorage.getItem('currentUser'))

  if(!neverMind) setUserLogged(currentUser)
  return () => ( neverMind = true);
},[])

Каким-то образом ваш компонент отключен, но даже если он отключен - вы все еще пытаетесь обновить его состояние. Чтобы избежать этого, установите флаг, который будет сообщать вам, когда компонент отключен (в возвращаемой функции), и обновлять состояние только в том случае, если флаг не изменился.

Для другого примера того, как происходит «очистка» используется функция ", см. React docs - https://reactjs.org/docs/hooks-effect.html#example -using-hooks-1

Вот ссылка на ответ Дана Абрамова на этот вопрос - https://github.com/facebook/react/issues/14369#issuecomment - 468267798