doubleyong
管理员
管理员
  • 最后登录2025-12-02
  • 发帖数1198
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:7005回复:0

[react]关于Warning: Can't call setState (or forceUpdate) on an unmounted component.

楼主#
更多 发布于:2018-08-30 10:36
错误信息如下:

Warning: Can't call setState (or forceUpdate) 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.
    in CommentList (created by Route)


原因:关于react中切换路由时报以上错误,实际的原因是因为在组件挂载(mounted)之后进行了异步操作,比如ajax请求或者设置了定时器等,而你在callback中进行了setState操作。当你切换路由时,组件已经被卸载(unmounted)了,此时异步操作中callback还在执行,因此setState没有得到值。


解决方案:
一、在卸载的时候对所有的操作进行清除(例如:abort你的ajax请求或者清除定时器)
componentDidMount = () => {
    //1.ajax请求
    $.ajax('你的请求',{})
        .then(res => {
            this.setState({
                aa:true
            })
        })
        .catch(err => {})
    //2.定时器
    timer = setTimeout(() => {
        //dosomething
    },1000)
}
componentWillUnMount = () => {
    //1.ajax请求
    $.ajax.abort()
    //2.定时器
    clearTimeout(timer)
}
二、设置一个flag,当unmount的时候重置这个flag
componentDidMount = () => {
    this._isMounted = true;
    $.ajax('你的请求',{})
        .then(res => {
            if(this._isMounted){
                this.setState({
                    aa:true
                })
            }
        })
        .catch(err => {})
}
componentWillUnMount = () => {
    this._isMounted = false;
}
三、最简单的方式(万金油)
componentDidMount = () => {
    $.ajax('你的请求',{})
    .then(res => {
        this.setState({
            data: datas,
        });
    })
    .catch(error => {
     });
}
componentWillUnmount = () => {
    this.setState = (state,callback)=>{
      return;
    };
}
参考:https://www.cnblogs.com/zyl-Tara/p/7998590.html
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号