一、原因
这种错误一般出现在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请求了。