关于Warning: setState(...):

关于Warning: setState(…): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.的解决方案

关于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;
}

三、最简单的方式(万金油)

    //组件将被卸载
    componentWillUnmount(){
        //重写组件的setState方法,直接返回空
        this.setState = (state,callback)=>{
            return;
        };
    }

猜你喜欢

转载自blog.csdn.net/snow51/article/details/80775408