React组件销毁中清理异步操做和取消请求

问题描述

当咱们在平时切换组件的时候，会遇到这种状况，若是组件中有异步请求任务，【当接口已经发出请求，可是组件已经销毁，那么接口返回数据后

会有这么一个警告

Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
复制代码

翻译： 警告：没法对未安装的组件执行响应状态更新。这是一个禁止操做，但它表示应用程序内存泄漏。要修复，请取消componentwillunmount方法中的全部订阅和异步任务。

解决方法

状况一: 阻止异步操做

componentWillUnmount() {
  this.setState = (state, callback) => {
    return
  }
}
复制代码

状况一: 清除定时

var timer;
...
componentDidMount = () => {
     timer = setTimeout(() => {
        this.setState({a:123})
    },1000)
}
componentWillUnMount = () => {
    clearTimeout(timer)
}
复制代码