React-native中页面卸载后setState出现警告的解决办法

verano 发布于2019-08-23 14:00 / 3071人阅读

摘要：在使用开发时经常出现这个警告这个警告是因为出现在异步网络请求返回时页面已经卸载了，此时仍然会执行的代码导致的，有很多解决办法，一般就是加个变量来判断是否卸载，但是这样挺麻烦的在每个页面都添加，我们可以用高阶组件来复用逻辑我们可以定义一个

1.在使用react-native开发时经常出现这个警告:
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的代码导致的，有很多解决办法，一般就是加个isMount变量来判断是否卸载，但是这样挺麻烦的在每个页面都添加，我们可以用高阶组件来复用逻辑
2.我们可以定义一个ts模块

import *as React from "react"
const SafeSetState = function(WrappedComponent:React.ComponentClass
) {
    return class SafeComponent extends WrappedComponent{
        private isMount:boolean
        componentDidMount(){
            this.isMount=true
            if(super.componentDidMount){
                super.componentDidMount()
            }
        }
        componentWillUnmount(){
            this.isMount=false
        }
        setState(state,callback?){
            if(this.isMount){
                super.setState(state,callback)
            }
        }

    }
};

export default SafeSetState

我们这种高阶组件方式叫反向继承，我们添加一个isMount属性，在setState时判断一下装填就OK了

其实还有其他高阶解决办法，可以参考这个大神的文章从一次react异步setState引发的思考

服务器托管混合云的解决办法微软的解决办法 use的解决办法换ip的解决办法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99918.html

React和React-native踩坑记

摘要：坑请求跨域问题使用时，其中的已经默默帮你做了很多事，都帮你配置好了所以你发现你找不到相关的配置文件。放到服务器上仍然是空白的无法访问。原来是因为路径问题，简单配置一下即可。上文提到过已经帮我们做好了很多事，方便在此，麻烦也在此。 react坑： 1、fetch请求cookie跨域问题使用creat-react-app时，其中的react-script已经默默帮你做了很多事，都帮你配置好...

yck 2019-08-21 18:38 评论0 收藏0
「译」setState如何知道它该做什么？

摘要：本文翻译自原作者如果有任何版权问题，请联系当你在组件中调用时，你觉得会发生什么当然，会用这条状态重新渲染组件并且更新匹配到的，然后返回元素。如果你之前使用过一些渲染器比如说，你可能知道在页面中使用超过一个渲染器是没什么问题的。本文翻译自：How Does setState Know What to Do?原作者：Dan Abramov 如果有任何版权问题，请联系shuirong199...

OldPanda 2019-08-23 14:36 评论0 收藏0
ReactNative开发笔记（持续更新...）

摘要：，已过期，请使用代替。解决方案安卓增加属性并设置为官方解释当图片实际尺寸和容器样式尺寸不一致时，决定以怎样的策略来调整图片的尺寸。本文均为RN开发过程中遇到的问题、坑点的分析及解决方案，各问题点之间无关联，希望能帮助读者少走弯路，持续更新中... （2019年3月29日更新）原文链接：http://www.kovli.com/2018/06/... 作者:Kovli - 如何在原生...

浠ラ箍 2019-08-23 14:33 评论0 收藏0