美文网首页react项目问题React交流
React异步请求数据出现setState(...): Can

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

作者: 大柚子08 | 来源:发表于2017-06-19 13:53 被阅读7689次
    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,仅当_isMountedtrue即还未被卸载,才执行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
    }
    

    相关文章

      网友评论

      • haisonLIN:按照大佬的方法解决警告了,谢谢啦
      • stone1314:那isMounted为false了,那岂不是不能setState了?
      • 404http:我也遇到这问题,按照你方法试了后发现不行呀,还是有警告提示
        大柚子08:你可以把你的代码简信发我吗,我看看
      • 邪人君子:解决了我的问题
        f2e4447540b0:请问 我的react项目 设置按需加载后出现了这个问题 你知道该怎么解决么
        大柚子08:@邪人君子 :relaxed:

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

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