美文网首页
【React报错】isMounted is an Antipat

【React报错】isMounted is an Antipat

作者: ___Jing___ | 来源:发表于2018-10-31 14:57 被阅读0次

    Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

    控制台报错

    一般这种情况会出现在一个没有卸载的组件中执行了setState()操作。
    比如我们加载了一个页面,页面正在执行一些异步请求操作,在数据还没有回来之前,我们就切换了页面,导致这个组件被卸载了,但是等数据返回以后调用setState的时候控制台就会输出上边的警告。
    对此,官网给出了我们一个解决方案:isMounted
    简化示例:

    componentWillMount() {
        this._isMounted = true
        fetch(url).then (response)=>{
            if (this._isMounted) {
                 this.setState({ ...response })
            }
        });
    }
    componentWillUnmount() {
        this._isMounted = false
    }
    

    以上是参考官方的解决方案,然而当我们修改别人的代码时,可能不太想改动太大,那么可以尝试下面的解决方案:

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

    这个方法可以比较快速的解决现有报错问题,但是要慎重使用,请注意不要修改了父组件的setState方法。

    相关文章

      网友评论

          本文标题:【React报错】isMounted is an Antipat

          本文链接:https://www.haomeiwen.com/subject/ofjatqtx.html