为什么我js文件中的data赋值异常?

小程序 文章 2020-07-31 18:41 0 15 全屏看文
为什么我js文件中的data赋值异常?
先放出相关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].realtimees.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,这是为什么

First release the relevant JS code and wxml code. JS code 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) / / the first line comments for (let I = 0; I < 0 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])// Comment on the second line that.setData ({                 array:res.data               })               console.log ( that.data.array )//The third line comments}}}} wxml code < view style=“ color:red;float : left; "> current number of people:{{ item.percent }}< / View > Z at the end of the loop, we print the result of the third line of comment. We can see that the value has been assigned successfully, but null is always displayed in the front end. At the same time, appdata in the debugger is always displayed as null. The print result of the debugger's console shows that that.data.array (data The array in the previous screenshot has been updated, but the front end is displayed as null, and the normal number has only been successfully displayed once before, that is, 5113 at the corresponding position in the previous screenshot. Why is this

回答:

张有釜:

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

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

Hall of fame:问题解决了,我按网上教程写了一个文件通过编写一个能够在wxml就直接处理数据为保留两位小数的的wxs模块,这是教程,看完之后你可能会对我的问题有更清晰的认识https://www.meiwen.com.cn/subject/hypgwxtx.html
Distance:

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

Hall of fame:问题解决了,我按网上教程写了一个文件通过编写一个能够在wxml就直接处理数据为保留两位小数的的wxs模块,这是教程,看完之后你可能会对我的问题有更清晰的认识https://www.meiwen.com.cn/subject/hypgwxtx.html
Hall of fame:

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

-EOF-