微信小程序—循环与success函数中设置值和获取值的踩坑与经验

在上一篇文章中有提到过需要用到for循环遍历获取数据库数据然后赋值到data数据中,data数据设计如下

data:{
	array:[{id:0;data:[]},]
}

我刚开始的设计

var that=this
var i=0
for(i=0;i<9;i++){
	 const db = wx.cloud.database()
      db.collection('list')
      .where({
          id:array[i].id
       })
       .get({
         success:function(res){
            that.setData({
            	array[i].data:res.data[0]
            })
         }
       })
}

结果报错了
在这里插入图片描述
百度了半个小时后发现说setdata里面是不允许是这样写的

解决方法

	success:function(res){
       var data='array['+i+'].data'
       that.setData({
           [data]:res.data[0]
       })  
	}

问题一解决

正所谓一生二,二生三,三生万物
改一个bug就会出现两个bug

接下来的问题是在success中读取 i 的值永远是某个固定的值

比如:如果在微信小程序中要遍历输出 0-9 的数,我们会使用for循环

for(var i=0;i<10;i++){
      console.log(i);
}

结果没啥毛病
在这里插入图片描述
但是,如果我在循环时同时调用wx的api接口10次,那么输出的结果就会不同(这是产生了闭关的效应)

for(var i=0;i<10;i++){
   wx.showToast({
     title: ‘haha‘,
     success:function(){
       console.log(i);
     }
   })
 }

结果就有毛病了
在这里插入图片描述

又是漫长的百度过程

……

……

……

后来认真学习了var let const三种变量定于作用域之后找到了解决方法,var的作用域是全局,let的作用域是块
我们使用ES6中let的块作用域的方法就可以解决以上的问题

for(let i=0;i<10;i++){
      wx.showToast({
        title: ‘haha‘,
        success: function () {
          console.log(i);
        }
      })
    }

结果

最后的代码

for(let i=0;i<9;i++){
	 const db = wx.cloud.database()
      db.collection('list')
      .where({
          id:array[i].id
       })
       .get({
         success:function(res){
         	var data='array['+i+'].data'
	        that.setData({
	           [data]:res.data[0]
	        })  
         }
       })
}

问题完美解决,下课

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值