React hooks-useEffect | 解决报错Warning...cancel all subscriptions and asynchronous tasks in a useEffect

Prpr_Saber

于 2019-04-01 18:06:08 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react react hooks useEffect

本文链接：https://blog.csdn.net/u011607490/article/details/88953692

react 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个React应用中因未正确清理useEffect副作用导致的内存泄漏问题，并提供了具体的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const [isMobile, setIsMobile] = useState(false)
  useEffect(() => {
    window.onresize = () => {
      document.documentElement.clientWidth < 760
        ? setIsMobile(true)
        : setIsMobile(false)
      console.log('resize')
    }
  }, [setIsMobile])

比如这里，使用useEffect注册了一个监听窗口大小的函数，但是，当切换其他组件时，react报错

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. in About

提示内存泄漏，需要在组件内取消订阅。

解决办法，useEffect的第一个参数应该返回一个函数，用来取消事件监听。

  const [isMobile, setIsMobile] = useState(false)
  useEffect(() => {
    window.onresize = () => {
      document.documentElement.clientWidth < 760
        ? setIsMobile(true)
        : setIsMobile(false)
      console.log('resize')
    }
    return () => {
      window.onresize = null
      console.log('resize:clear')
    }
  }, [setIsMobile])