Предупреждение: невозможно выполнить обновление состояния React для отключенного компонента. В функциональной составляющей

Question

У меня есть функциональный компонент, в котором я получаю значение из своего localStorage и использую это значение, устанавливая значение в состоянии:

localforage.getItem<string>('sortType').then((value) => {
  setSortType(value)
})

const [sortType, setSortType] = useState('release_date');

Когда я запускаю компонент, я получаю журнал:

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

Я читал, что это происходит потому, что я использую асинхронный c метод localforage.getItem в состоянии. Но я не нашел решения, которое работало бы в функциональном компоненте.

Answer 1

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

Чтобы решить эту проблему, вы можете проверить, смонтирован ли компонент, прежде чем устанавливать состояние:

const isMountedRef = useRef(true)
useEffect(() => () => { isMountedRef.current = false }, [])

Поскольку массив зависимостей пуст, эффект вызывается, когда компонент монтируется, а обратный вызов выполняется, когда он размонтируется

// somewhere in your code later
localforage.getItem<string>('sortType').then((value) => {
  if (isMountedRef.current) {
      setSortType(value)
  }
})

Answer 2

Попробуйте запустить sortType из localStorage один раз, используя React.useEffect, как показано ниже:

const [sortType, setSortType] = useState('release_date');

React.useEffect(() => {
  localforage.getItem<string>('sortType').then((value) => {
    setSortType(value)
  })
}, []);