在React组件unmounted以后setState的报错处理

最近在作项目的时候遇到一个问题，在 react 组件 unmounted 以后 setState 会报错。咱们先来看个例子， 重现一下问题：

class Welcome extends Component { state = { name: '' } componentWillMount() { setTimeout(() => { this.setState({ name: 'Victor Wang' }) }, 1000) } render() { return <span>Welcome! {this.state.name}</span> } } class WelcomeWrapper extends Component { state = { isShowed: true } componentWillMount() { setTimeout(()=> { this.setState({ isShowed: false }) }, 300) } render() { const message = this.state.isShowed ? <Welcome /> : 'Bye!' return ( <div> <span>{ message }</span> </div> ) } }

举的例子不是很好，主要是为了说明问题。在 WelcomeWrapper 组件中， 300ms 以后移除了 Welcome 组件，但在 Welcome 组件里 1000ms 以后会改变 Welcome 组件的状态。这时候 React 会报出以下错误：

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

这种错误状况通常出如今 react 组件已经从 DOM 中移除。咱们在 react 组件中发送一些异步请求的时候， 就有可能会出现这样的问题。举个例子，咱们在 componentWillMount 中发送异步请求，当请求成功返回数据，咱们调用 setState 改变组件的状态。可是当请求到达以前， 咱们更换了页面或者移除了组件，就会报这个错误。这是由于虽然组件已经被移除，可是请求还在执行， 因此会报setState() on an unmounted component的错误。

决解问题

好了， 咱们如今知道问题出现的缘由， 咱们该怎么解决这个问题？思路也很简单， 咱们只要在 react 组件被移除以前终止 setState 操做就好了。回到以前的例子， 咱们能够这样作：

componentWillMount() {
  // 咱们把 setTimeout 保存在 timer 里 this.timer = setTimeout(() => { this.setState({ name: 'Victor Wang' }) }, 1000) } // 在组件将要被移除的时候，清除 timer componentWillUnmount() { clearTimeout(this.timer) }

相似的在处理 ajax 请求的时候也是这个套路， 在 componentWillUnmount 方法中终止 ajax 请求便可，以 jquery 为例：

componentWillMount() {
  this.xhr = $.ajax({ // 请求的细节 }) } componentWillUnmount() { this.xhr.abort() }

在处理 fetch 请求的时候思路也是同样的， 可是处理起来就没有那么容易了。 由于 Promise 不能被取消， 至少从目前的规范来看是没有相应的 API 来取消 Promise chain 的。未来可能会实现相应的 API， 感兴趣的能够看看这里和这里的讨论。

fecth 请求的处理

为了让 Promise 能够被取消，咱们处理的思路是这样的，咱们在咱们的 Promise 外面再包裹一层 Promise 来保证咱们的 Promise 能够被取消。下面看代码：

const makeCancelable = (promise) => { let hasCanceled_ = false; const wrappedPromise = new Promise((resolve, reject) => { promise.then((val) => hasCanceled_ ? reject({isCanceled: true}) : resolve(val) ); promise.catch((error) => hasCanceled_ ? reject({isCanceled: true}) : reject(error) ); }); return { promise: wrappedPromise, cancel() { hasCanceled_ = true; }, }; };

这个 pattern 是由@istarkov提出来的。
上面用到 Promise 的相关知识， 不熟悉 Promise 的同窗能够参考这里。
如今咱们就能够用 makeCancelable 来取消咱们的 fetch 请求了。

componentWillMount() {
  // 为了简单和方便， 这里我用 setTimeout 来模仿一个须要很长时间的 fetch 请求 const mimicFetch = (resolve, reject) => { setTimeout(() => { resolve('Victor Wang') }, 1000) } const promise = new Promise(mimicFetch) this.cancelable = makeCancelable(promise) this.cancelable.promise.then(name => { this.setState({ name }) }, (e) => { console.log(e) }) } componentWillUnmount() { // 在这取消 this.cancelable.cancel() }

预防错误

为了不这种错误的发生，咱们有一个通用的 pattern 来处理这个问题。

componentWillMount () {
// add event listeners (Flux Store, WebSocket, document, etc.) } componentWillUnmount () { // remove event listeners (Flux Store, WebSocket, document, etc.) }

注：有什么不对的地方， 欢迎指正！