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请求了。