Can’t perform a React state update on an unmounted component

导语： 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 t

最近项目中有一个这样的需求，从别的项目要转到我项目中的某个页面，不过回退时要可以回退到项目的首页。

实现这样的跳转的话，应当是首先要跳转到项目的首页，然后再从首页跳转到对应的页面。

我最开始的实现是这样的：

componentDidMount() {
    const jumpUrlList = ['own'];
    const jumpUrl = getQueryString('jumpto');
    const targetJump = window.sessionStorage && window.sessionStorage.getItem('targetJump');

    // 防止无限跳转，使用sessionStorage存储一个标记，整个周期内只跳转一次
    if (jumpUrlList.indexOf(jumpUrl) > -1 && !targetJump) {
        window.location.href = '#/' + jumpUrl;
        window.sessionStorage.setItem('targetJump', '1');
    }
}

但运行时，会提示这个错误：

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 方法中取消所有的订阅和异步任务。

因为我在首页中有异步请求，请求返回回来后，使用 setState 更新视图。但我已经跳转到别的路由了，导致 setState 更新时，当前组件已被销毁了，无法更新。

解决方法：

1. 若您的异步请求可以取消的话，在 componentWillUnmount 中取消请求；

2. 在 render() 方法中进行判断，若可以跳转，则直接不渲染；

render() {
    const jumpUrlList = ['own'];
    const jumpUrl = getQueryString('jumpto');
    const targetJump = window.sessionStorage && window.sessionStorage.getItem('targetJump');
    if (jumpUrlList.indexOf(jumpUrl) > -1 && !targetJump) {
        window.location.href = '#/' + jumpUrl;
        window.sessionStorage.setItem('targetJump', '1');
        return null;
    }

    return (
        <div className="home">
            <User />
        </div>
    );
}

1. 使用高阶组件重新封装 componentWillUnmount 和 setState；

function inject_unount(target) {
    // 改装componentWillUnmount，销毁的时候记录一下
    let next = target.prototype.componentWillUnmount;
    target.prototype.componentWillUnmount = function() {
        if (next) next.call(this, ...arguments);
        this.unmount = true;
    };
    // 对setState的改装，setState查看目前是否已经销毁
    let setState = target.prototype.setState;
    target.prototype.setState = function() {
        if (this.unmount) return;
        setState.call(this, ...arguments);
    };
}
@inject_unount
class BaseComponent extends Component {}
//以后我们写组件时直接继承BaseComponent