一、原因
這種錯誤一般出現在react組件已經從DOM中移除。我們在react組件中發送一些異步請求的時候,就可能會出現這樣的問題。舉個例子,我們在componentWillMount中發送異步請求,當請求成功返回數據,我們調用setState改變組件的狀態。但是當請求到達之前,我們更換了頁面或者移除了組件,就會報這個錯誤。這是因為雖然組件已經被移除,但是請求還在執行,所以會報setState() on anunmounted component的錯誤。
二、解決思路
思路很簡單,我們只要在react組件被移除之前終止setState操作就可以了。
三、樣例解決
(1)定時器,在WillUnmount的時候把定期關閉。
(2)處理ajax的時候,這里以jquery為例
(3)低版本的react和ES5環境下
利用isMounted(),不建議用isMounted,isMounted在通話前檢查setState確實消除了警告,但也違反了警告的目的,因為現在你永遠不會得到警告(即使你應該!)而且ES6上isMounted已經被禁止使用。
(4)ES6環境下,推薦使用
(5)fetch請求的處理
為了讓Promise可以被取消,我們處理的思路是這樣的,我們在我們的Promise外面再包裹一層Promise來保證我們的Promise可以被取消。
現在我們就可以用makeCancelable來取消我們的fetch請求了。
