微信小程序 关于打印数组为空,数组长度为0的问题
踩坑
今天在做项目测试时,偶然发现了一个关于数组的问题。一开始让我有点疑惑和奇怪,但是发现其实是一个小问题。
需求描述:前端从后台数据库发送request请求,获取数据,存到本地数组。再将本地数组的数据渲染出来,以为用户显示数据。
问题描述:我在发送request请求后,将数据存到数组后。console.log(array)去输出数组,console.log(array.length)输出数组的长度,发现数组是空数组,长度也为0.
出现问题的代码
通过request请求,获取未完成的作业列表和已完成的作业列表,分别是res.data.data.homeworkNoCompleteList和res.data.data.homeworkYesCompleteList,并用setData函数存到本地数组中。
但是!!通过console.log()打印出来的数组是空,数组长度都是0。
wx.request({
url: '某url',
data: {
student_id: '学号',
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
console.log(res.data)
that.setData({
homeworkNoCompleteList: res.data.data.homeworkNoCompleteList,
homeworkYesCompleteList: res.data.data.homeworkYesCompleteList,
// homeworkNoNumber: that.data.homeworkNoCompleteList.length,
// homeworkYesNumber: that.data.homeworkYesCompleteList.length,
// examNoNumber: that.data.examNoCompleteList.length,
// examYesNumber: that.data.examYesCompleteList.length,
// discuss_number: that.data.discusslist.length
})
console.log(that.data.homeworkYesCompleteList.length)
}
})
// 获取需完成作业、已完成作业、需完成考试、已完成考试的数量
console.log(this.data.homeworkYesCompleteList)
console.log(this.data.studentStatus);
console.log(this.data.teacherStatus);
console.log(this.data.homeworkNoNumber);
console.log(this.data.homeworkYesNumber);
console.log(this.data.examNoNumber);
console.log(this.data.examYesNumber)
接着出现了下面这张图的输出情况。
成功获取了数据,能够输出数组,并且在这句语句
console.log(that.data.homeworkYesCompleteList.length)
能够正确输出2,而不是0。
在wxml中的代码,我又是通过homeworkYesNumber这些数值去判断是否要渲染出东西来,否则在没有数据时还显示某些结构,就占用空间且不美观。但是,上面的代码会让变量为0。于是乎,就是一片空白。
问题出现的原因
在onload函数中,我通过request函数获取数据,但是在下面的console.log()却不能如期输出数据。所以我想,在完成onload函数时,request请求还没有完成。也就是说,还没有把数据存到本地数组里,自然而然数组长度就是0。
问题解决
在request的success中,完成setData操作就好
success: function (res) {
console.log(res.data)
that.setData({
homeworkNoCompleteList: res.data.data.homeworkNoCompleteList,
homeworkYesCompleteList: res.data.data.homeworkYesCompleteList,
homeworkNoNumber: that.data.homeworkNoCompleteList.length,
homeworkYesNumber: that.data.homeworkYesCompleteList.length,
examNoNumber: that.data.examNoCompleteList.length,
examYesNumber: that.data.examYesCompleteList.length,
discuss_number: that.data.discusslist.length
})