配列の印刷に関するWeChatアプレットは空で、配列の長さは0です。

配列の印刷に関するWeChatアプレットは空で、配列の長さは0です。

ピットを踏む

今日プロジェクトのテストをしているときに、配列に関する問題に遭遇しました。最初は少し戸惑い、不思議に思いましたが、実は小さな問題でした。
要件の説明：フロントエンドは、バックエンドデータベースからリクエストリクエストを送信して、データを取得し、ローカル配列に格納します。次に、ローカル配列のデータをレンダリングして、ユーザーのデータを表示します。
問題の説明：リクエストを送信した後、データを配列に保存します。console.log（array）は配列を出力し、console.log（array.length）は配列の長さを出力します。配列は空の配列であり、長さも0であることがわかります。

問題のあるコード

リクエストリクエストを通じて、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)
でき、文は0ではなく2を正しく出力できます。

wxmlのコードでは、homeworkYesNumberの値を使用して、何かをレンダリングするかどうかを判断します。そうしないと、データがないときに何らかの構造が表示され、スペースを占有して見苦しくなります。ただし、上記のコードは変数を0にします。それ以来、それは空白です。

問題の原因

onload関数では、request関数を使用してデータを取得しますが、以下のconsole.log（）は期待どおりにデータを出力できません。ですから、onload機能が完了しても、リクエストはまだ完了していないと思います。つまり、データはローカル配列に格納されていないため、配列の長さは当然0です。

問題が解決しました

リクエストが成功したら、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
        })