React-報錯Warning:setState(...)on anunmounted component


一、原因

        這種錯誤一般出現在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請求了。
         


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM