1. 程式人生 > >React非同步請求資料出現setState(...): Can only update a mounted or mounting component...

React非同步請求資料出現setState(...): Can only update a mounted or mounting component...

Warning: setState(…): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the XXX component.

錯誤警告是我們可能對一個沒有裝載的元件執行了setState()操作,在React的官網裡有一個解決辦法,isMounted

出現的原因:
這種情況通常出現在callback中,我們的非同步請求返回資料之前,元件可能就已經被解除安裝了,等資料回來再使用setState()j就會報出上面的警告,所以我們應該手動在componentWillUnmount裡去取消callback在它被unmounting之前。

解決辦法:
我們可以使用一個標誌位_isMounted,在componentDidMount裡設定為true,在componentWillUnmount裡設定為false,僅當_isMounted為true即還未被解除安裝,才執行setState()

我的程式碼:

componentDidMount () {
    this._isMounted = true
    this.reqDataSouce()
},
reqDataSouce () {
    let URL = ''
    let _th = this
    let {curTab, cruPagination, memberId, pageSize} = _th.state
    curTab = parseInt
(curTab) let formData = {} if (curTab === 0) { URL = 'job/platformPosition/queryByCheck' } else { URL = 'job/platformPosition/queryByPage' formData.state = curTab } formData.page = cruPagination formData.companyId = memberId formData.pageSize = pageSize getRequest(true
, URL, formData).then(function (res) { let code = res.code if (code === 0) { let list = res.data.list if (_th._isMounted) { _th.setState({ dataSouce: [...list], paginationTotal: res.data.total }) } } else { message.error('系統錯誤!') } }) }, componentWillUnmount () { this._isMounted = false }

相關推薦

React非同步請求資料出現setState(...): Can only update a mounted or mounting component...

Warning: setState(…): Can only update a mounted or mounting component. This usually means you call

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a

原因主要是: 這個錯誤在配合 多次Route的時候會經常出現 Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This

React + antd 組件離開頁面以後出現Can only update a mounted or mounting component 的解決辦法

建議 react set scrip log 卸載 str class () 做項目的過程中,來回切換頁面時,一直遇到Can only update a mounted or mounting component 這個問題,原因是當離開頁面以後,組件已經被卸載,執

微信小程式中使用Echarts(可非同步請求資料

在微信小程式中使用Echarts,主要分為以下幾步: 1.首先要下載ecomfe/echarts-for-weixin專案,下載後將ec-canvas資料夾複製到小程式專案中,假設放在根目錄下utils資料夾中。 2.在要實現echarts圖的頁面引入echarts.js檔案,例如要在i

【WePY小程式框架實戰四】-使用async&await非同步請求資料

async await 是對promise的近一步優化,既解決了promise鏈式then的這種寫法壁壘,又讓非同步請求更像同步,若對async await不太瞭解的同學可以直接參考阮一峰老師的文章async 函式的含義和用法,這裡我們只關注怎麼在小程式wepy架構中如何使用。 依賴庫 import

ajax非同步請求資料,用bootstrap中的tree模板實現tree

後臺資料格式json資料data: {"0":[{"id":1,"fatherId":0,"typeName":"測試","typeIndex":0,"typeStatus":"1"}], "1":[{"id":2,"fatherId":1,"typeName":"測試類別

09.1.VUE學習之watch監聽屬性變化實現類百度搜索欄功能ajax非同步請求資料,返回陣列

09.1html裡 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

1、解決ajax非同步請求資料後swiper不能迴圈輪播(loop失效)問題、滑動後不能輪播的問題。

問題描述:        1、我使用axios非同步請求後臺的圖片進行渲染後不能實現迴圈輪播,也就是loop失效,但是靜態寫死的情況下不會出現這種問題。        2、 分析:      

bootstrap模態框動態賦值, ajax非同步請求資料後給id為queryInfo的模態框賦值並彈出模態框(JS)

//查詢單個 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : "POST",

ajax進行非同步請求資料新增loading效果

#fountainG{ position:relative; margin:10% auto; width:240px; height:29px} .fountainG{ position:absolute; top:0; background-color:#33cc99; width:29px; he

iOS開發中,對請求資料出現的一些簡單處理

這裡呢是整理的一位老鳥的東西,好東西得分享 大致實現思路就是迴圈便利做比較,如果發現是NSNull型別的就把值改為空字串;這樣的好處就是當資料請求回來,刪除一下資料裡面為<null>型別的東西,避免在直接取的時候產生程式崩潰問題; 兩個方法,一個返回NSA

react fetch 請求資料

getData(){ //請求資料函式 fetch('https://www.easy-mock.com/mock/59801fd8a1d30433d84f198c/examp

python出現float() argument must be a string or a number, not 'map'的錯誤

報錯:TypeError: float() argument must be a string or a number, not 'map' 這時候,首先你肯定是用了map()這個函式,不管你用map這個函式把資料轉變成了什麼格式,不管是int還是float還是其它的,最後

react非同步資料如ajax請求應該放在哪個生命週期?

對於同步的狀態改變,是可以放在componentWillMount,對於非同步的,最好好放在componentDidMount。但如果此時有若干細節需要處理,比如你的元件需要渲染子元件,而且子元件取決於父元件的某個屬性,那麼在子元件的componentDidMount中進行處

python 讀取資料出現UnicodeDecodeError:: 'utf-8' codec can't decode byte 0xc8 in position 0: invalid contin

之前寫程式時也出現過類似錯誤,每次解決了到第二次遇見又忘了具體方法,這次記錄一下。 一、字元編碼問題 先介紹一下字元編碼問題 1.ASCLL與GB2312 由於計算機是美國人發明的,因此,最早只有127個字元被編碼到計算機裡,也就是大小寫英文字母、數字和一些符號,這個編碼表被稱為

[React.js]元件解除安裝如何自動取消非同步請求

背景介紹 某次路過同事的工位,剛好看到同事在寫面試評價,看到裡面有一個問題:元件解除安裝時自動取消非同步請求問題,不及格。 我:??? 現在fetch已經支援手動abort請求了嗎? 於是上網去查各種資料:how to abort fetch http request when component u

jQuery Ajax 非同步請求data引數資料格式的六種方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body>

React請求資料為什麼要在componentDidMount方法裡面做?

轉載自:https://segmentfault.com/q/1010000008133309/a-1020000008135702 這與React元件的生命週期有關,元件掛載時有關的生命週期有以下幾個: constructor() componentWillMount() ren

用AsyncTask來實現非同步請求網路資料

public class HelperAsnc { public HelperAsnc(){} //get請求 public HelperAsnc get(String url){ doHttp(url,"GET",""); retu

【我的Android進階之旅】使用Retrofit進行Post請求報錯: @Field parameters can only be used with form encoding.

一、問題描述 今天隨手寫一個post請求的時候,報錯了,如下所示: 09-28 11:11:28.155 10547-10547/com.xtc.watch E/Fatal: {CrashHandler.saveAndPrintLog-58} jav