微信小程序—循环与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]
	        })  
         }
       })
}

问题完美解决，下课