rn中&&导致的死循环

需求:
要做一个批处理的列表,选中的item状态改变 并且提交到后台,刷新界面。
bug:
这个bug比较奇葩,会导致死循环。


xunhuan.png

代码:

    renderItem = ()=>{
        if(!this.state.list){
            return null;
        }
        let arr = [];
        for(let i=0;i<this.state.list.length;i++){
            let ischoose = false;
            for(let j=0;j<this.state.arr&&this.state.arr.length;j++){
                // console.log('执行了这里'); 这里注释掉 不会死循环但是显示不正确 会有bug
                if(this.state.list[i].id===this.state.arr[j]){
                    ischoose = true;
                    console.log('执行了这里');
                    break;
                }
            }
            arr.push(<Item
                key = {i}
                ischoose = {ischoose}
                choose = {this.choose}
                rowData={this.state.list[i]}/>)
        }
        return arr;
    };

fix:
给数组一个初始化,删除&&这个就好。

    renderItem = ()=>{
        if(!this.state.list){
            return null;
        }
        let arr = [];
        for(let i=0;i<this.state.list.length;i++){
            let ischoose = false;
            for(let j=0;j<this.state.arr.length;j++){
                if(this.state.list[i].id===this.state.arr[j]){
                    ischoose = true;
                    console.log('执行了这里');
                    break;
                }
            }
            arr.push(<Item
                key = {i}
                ischoose = {ischoose}
                choose = {this.choose}
                rowData={this.state.list[i]}/>)
        }
        return arr;
    };

原因:
为了寻找原因执行如下代码

   console.log('this.state.arr&&this.state.arr.length',this.state.arr&&this.state.arr.length);
        let index = 1;
        if(index<this.state.arr&&this.state.arr.length){
            console.log('小于');
        }else{
            console.log('不小于');
        }

打印


log.png

发现

 if(index<this.state.arr&&this.state.arr.length){

这个比较是不正确的。
然后再次修改执行这段代码

   console.log('this.state.arr&&this.state.arr.length',this.state.arr&&this.state.arr.length);
        let l = this.state.arr&&this.state.arr.length;
        let index = 1;
        if(index<l){
            console.log('小于');
        }else{
            console.log('不小于');
        }

这样就可以正常比较了


log2.png

总结:
当在循环中使用&&判断是否为空时最好小心,
可以使用初始化代替 护着使用变量赋值的方式代替。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,971评论 25 709
  • 对象的创建与销毁 Item 1: 使用static工厂方法,而不是构造函数创建对象:仅仅是创建对象的方法,并非Fa...
    孙小磊阅读 6,268评论 0 3
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,857评论 0 17
  • 2014年是发生最多事情的一年。想起年初,我还有半年的在学校学习的机会,之后就要去实习了。梦想着即将要踏入社会,应...
    晓依阅读 1,229评论 0 1
  • 黄瓜与小菜 小菜是个可爱的姑娘,温柔贤惠含蓄。 黄瓜是个帅气的小伙,憨厚老实简单。 它们的不期而遇是必然的,也是偶...
    一毛旅行阅读 921评论 0 1

友情链接更多精彩内容