Can‘t perform a React state update on an unmounted component.This is a no-op, but it indicates

最新推荐文章于 2023-11-21 20:19:54 发布

kyyius

最新推荐文章于 2023-11-21 20:19:54 发布

阅读量192

点赞数

文章标签： react js

本文链接：https://blog.csdn.net/kyyius/article/details/115959384

版权

这篇博客讨论了在React应用中遇到的警告：不能在未挂载的组件上更新状态，这是一个内存泄漏的迹象。文章指出，当卸载组件前未清空state，可能导致内存泄露。为了解决这个问题，作者给出了使用React Hooks的例子，特别是`useEffect`的清理函数，展示如何在组件卸载时将状态重置为null，从而避免内存问题。

摘要由CSDN通过智能技术生成

警告信息:
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.

情景
使用路由跳转到新页面(target="_blank")
ReactDOM.unmountComponentAtNode(document.getElementById(‘root’))卸载根组件时出现

原因：
卸载组件之前要把对应的state这些清空，不然可能会造成内存泄露

解决：
hooks版本例子

// 关键代码
import {useState,useEffect} from 'react'
function App(){
const [a, setA] = useState=({xx: []})
 useEffect(()=>{
 // 返回的这个回调相当于生命周期的componnentWillUnmount
 	return ()=>{
	  setA(null)
	} 
  }, [])
}