WeChat applet about printing the array is empty, the length of the array is 0

Step on the pit

While doing project testing today, I stumbled upon a problem about arrays. It made me a little confused and strange at first, but it was actually a small problem.
Requirement description: The front-end sends a request request from the back-end database to obtain the data and store it in the local array. Then render the data of the local array to display the data for the user.
Problem description: After I send the request, I save the data in the array. console.log(array) to output the array, console.log(array.length) to output the length of the array, it is found that the array is an empty array, and the length is also 0.

The offending code

Through the request request, obtain the list of unfinished jobs and the list of completed jobs, which are res.data.data.homeworkNoCompleteList and res.data.data.homeworkYesCompleteList, and store them in the local array using the setData function.
but! ! The array printed by console.log() is empty, and the length of the array is 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)

Insert picture description here
Then appeared the output of the picture below.
The data is successfully obtained, the array can be output, and this sentence
console.log(that.data.homeworkYesCompleteList.length)
can correctly output 2 instead of 0.

In the code in wxml, I use the values of homeworkYesNumber to determine whether to render something, otherwise, some structure is displayed when there is no data, which takes up space and is not beautiful. However, the above code will make the variable 0. Ever since, it is a blank.

Insert picture description here

The cause of the problem

In the onload function, I get the data through the request function, but the console.log() below cannot output the data as expected. So I think that when the onload function is completed, the request has not yet been completed. In other words, the data has not been stored in the local array, so the length of the array is naturally 0.

problem solved

In the success of the request, just complete the setData operation

      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
        })