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 }, [])

由于依赖项数组为空，因此在装入组件时会调用效果，而在卸除组件时会执行回调

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

Answer 2

尝试通过如下所示使用React.useEffect从localStorage运行一次sortType：

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

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

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

2 个答案: