警告：无法对卸载的组件执行 React 状态更新。在功能组件中

Question

我有一个功能组件，我从 localStorage 获取一个值并使用该值在状态中设置一个值：

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

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

当我运行组件时，我得到一个日志：

警告：无法对卸载的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 清理函数中的所有订阅和异步任务。

我已经读到发生这种情况是因为我在localforage.getItem状态上使用了异步方法。但是我还没有找到可以在功能组件中工作的解决方案。

Answer 1

您在承诺解析后设置状态，这可能导致此代码在组件卸载后运行。

要解决此问题，您可以在设置状态之前检查组件是否仍处于挂载状态：

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

由于依赖数组为空，因此在组件挂载时调用 effect，卸载时执行回调

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