为什么我js文件中的data赋值异常？
发布于 4 年前 作者 liaoxiuying 13279 次浏览 来自 问答 
先放出相关JS代码和wxml代码
js代码
onLoad: function (options) {
  var that=this;
        wx.request({
          url: 'http://81.68.72.54/index/Perso/person3', 
          method: 'POST',
          success: function(res) {
            console.log(res)//第一行注释
            for (let i = 0; i < res.data.length; i++) {
              var num=res.data[i].realtime/res.data[i].capacity*100
              num=num.toFixed(1)
              res.data[i].percent=num
              console.log(res.data[i])// 第二行注释
              that.setData({
                array:res.data
              })
              console.log(that.data.array)// 第三行注释
            }
          }
        })
}
wxml代码
   <view style="color:red;float: left;">当前人数：{{item.percent}}</view>

z在循环结束后，我们打印第三行注释的结果可以看出，已经成功赋值

但是在前端却一直显示null

同时调试器中的AppData也一直显示为null

调试器的console的打印结果显示，明明that.data.array（也就是data 中的array数组）已经被更新，但前端却显示为null，而且之前也只成功显示过一次正常的数字，就是上上个截图对应位置的51 13，这是为什么

3 回复

for循环打印一下num看看是不是本身就是null

for循环之后 settimeout延时1秒 打印一下 array看看

你最好用开发工具写一个demo 贴一下 代码片段

现在似乎找到原因了，可能是success回调函数中for循环的遍历出现了问题，因为每刷新4次就正常显示一次，很可能是for循环中percent与其对应数组没有对应赋值上，导致无法正常在前端按正常顺序遍历打印percent，但我想问问，我想在前端显示，realtime和capacity字段的比率怎么做，以前我是用{{realtime/capacity}}这样的形式在前端显示，但后来发现这样做很容易出现很长一段小数，所以，就像先在js内部处理成保留两位小数的模式，然后再在前端显示，但却出现了循环遍历顺序有误这样的问题，我想有其他办法让realtime和capacity的比率直接在wxml页面就可以处理为保留两位小数的模式吗

回到顶部