reactjs - 警告 : Can't perform a React state update on an unmounted component. 在功能组件中

Question

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

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

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

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

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

我读到这是因为我使用了异步方法 localforage.getItem在一个状态。但是我还没有找到可以在功能组件中工作的解决方案。

Answer 1

您在 promise 解析后设置状态，这可能导致此代码在组件卸载后运行。
要解决此问题，您可以在设置状态之前检查组件是否仍处于挂载状态:

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)
  }
})