美文网首页
React异步请求数据出现setState(...): Can

React异步请求数据出现setState(...): Can

作者: sml_tj | 来源:发表于2019-03-01 09:18 被阅读0次
    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.
    Please check the code for the xxx component.
    

    大概意思就是我们可能对一个没有装载的组件执行了setState()操作,在React的官网里有一个解决这个办法的方案,isMounted
    原因:

    Such situations most commonly occur due to callbacks, 
    when a component is waiting for some data and gets unmounted before the data arrives. 
    Ideally, any callbacks should be canceled in componentWillUnmount, prior to unmounting.
    

    大概意思是这种情况会出现在callback中,我们的异步请求返回数据之前,组件可能就已经被卸载了,等数据回来再使用setState就会报出上面的警告,所以我们应该手动在componentWillUnmount里去取消callback在它被unmounting之前。
    解决办法:

    Just set a _isMounted property to true in componentDidMount 
    and set it to false in componentWillUnmount, and use this variable to check your component's status.
    

    很好理解,我们使用一个标志位_isMounted,在componentDidMount里设置为true,在componentWillUnmount里设置为false,仅当_isMounted为true即还未被卸载,才执行setState()。
    我的代码:

    componentWillMount() {
            this._isMounted = true
            fetch('网络请求').then (status, response)=>{
              if (this._isMounted) {
                this.setState({
                    activityTipsImg: response.data.tips_url,
                    activityTipsContent: response.data.tips_content
                })
              }
            });
    }
    componentWillUnmount() {
            this._isMounted = false
    }
    

    转自:https://www.jianshu.com/p/a9d1f5aa719a

    相关文章

      网友评论

          本文标题:React异步请求数据出现setState(...): Can

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