> 在React開發(fā)中萍嬉,我們可能經(jīng)常會遇到這個一個警告:
1. Can't perform a React stateupdateonan unmounted component.
2. Thisisano-op, but it indicates amemoryleakinyour application.
我們不能在組件銷毀后設(shè)置state乌昔,防止出現(xiàn)內(nèi)存泄漏的情況
關(guān)于react中切換路由時報(bào)以上錯誤,實(shí)際的原因是因?yàn)樵诮M件掛載(mounted)之后進(jìn)行了異步操作壤追,比如ajax請求或者設(shè)置了定時器等磕道,而你在callback中進(jìn)行了setState操作。當(dāng)你切換路由時行冰,組件已經(jīng)被卸載(unmounted)了溺蕉,此時異步操作中callback還在執(zhí)行,因此setState沒有得到值悼做。
解決的方式有兩種:
一疯特、在卸載的時候?qū)λ械牟僮鬟M(jìn)行清除(例如:abort你的ajax請求或者清除定時器)
componentDidMount =()=>{
//1.ajax請求
$.ajax('你的請求',{})
.then(res=>{
this.setState({
aa:true
? ? ? ? ? ? })
? ? ? ? })
.catch(err=>{})
//2.定時器
timer = setTimeout(()=>{
//dosomething
},1000)
}
componentWillUnMount =()=>{
//1.ajax請求
? ? $.ajax.abort()
//2.定時器
? ? clearTimeout(timer)
}
二、設(shè)置一個flag肛走,當(dāng)unmount的時候重置這個flag
componentDidMount =()=>{
this._isMounted =true;
$.ajax('你的請求',{})
.then(res=>{
if(this._isMounted){
this.setState({
aa:true
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? })
.catch(err=>{})
}
componentWillUnMount =()=>{
this._isMounted =false;
}
三漓雅、最簡單的方式(萬金油)
componentDidMount =()=>{
$.ajax('你的請求',{})
.then(res=>{
this.setState({
data: datas,
? ? ? ? });
? ? })
.catch(error=>{
? ? });
}
componentWillUnmount =()=>{
this.setState =(state,callback)=>{
return;
? ? };