微信小程序開發——使用回調函數出現異常：TypeError: Cannot read property 'setData' of undefined

關鍵技術點：

作用域問題——回調函數中的作用域已經脫離了調用函數了，因此需要在回調函數外邊把this賦給一個新的變量才可以了。

業務需求：

微信小程序開發，業務邏輯需要，需要把獲取手機號碼的業務邏輯作為檢驗登錄有效性函數的回調函數。

異常描述：

微信小程序開發給data中的變量賦值，出現以下錯誤：

VM1610:1 thirdScriptError
Cannot read property 'setData' of undefined;at pages/index/index checkSession function;at api request success callback function
TypeError: Cannot read property 'setData' of undefined
    at success (http://127.0.0.1:51323/appservice/pages/index/index.js:116:19)
    at Function.function.a.(anonymous function) (http://127.0.0.1:51323/appservice/__dev__/WAService.js:7:8019)
    at Object.success (http://127.0.0.1:51323/appservice/__dev__/WAService.js:4:13405)
......

詳細截圖：

異常代碼相關源碼：

Page({
  data: {
    phone: ""
  },
　　......
  /**
   * 獲取用戶手機號碼
   */
  getPhoneNumber: function(e) {
    //checkSession（callback) 登錄有效性驗證函數，接收回調函數
    //調用checkSession（callback) ，把getPhoneNumber的業務邏輯作為參數傳遞給驗證函數，以便checkSession（callback)在驗證登錄有效性之后做出相應的處理
    this.checkSession(function() {
      //用戶取消獲取手機號碼授權
      if (e.detail.errMsg == "getPhoneNumber:fail user deny") return;
      //用戶授權獲取手機號碼
      var sessionKey = wx.getStorageSync("session_key")
      //3. 解密手機號碼信息
      var self=this
      wx.request({
        url: 'http://xxxx.xxxxs.com/demo/demo.php',
        data: {
          'encryptedData': e.detail.encryptedData,
          'iv': e.detail.iv,
          'session_key': sessionKey
        },
        method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        header: {
          'content-type': 'application/json'
        }, // 設置請求的 header
        success: function(data2) {
          wx.hideLoading()
          if (data2.statusCode == 200) { 
            //成功獲取手機號碼              
            if (data2.data.phoneNumber){
              wx.showToast({
                title: data2.data.phoneNumber
              })
              self.setData({ //******出現異常的代碼部分********//
                phone: '新消息'
              })      
            }else{
              console.log(data2.data)
            }   
          }
        },
        fail: function(err) {
          console.log(err);
        }
      })
    })
  }
})

異常分析：

js文件中data的確有變量phone,一般來說，是不會出現錯誤異常的。既然出現了異常，那就應該是這部分代碼中有其他的一些代碼影響到了。

細細分析這部分代碼，除了把獲取手機號碼的業務邏輯作為 檢驗登錄有效性函數的回調函數之外，其他都是比較常用的代碼，所以問題很有可能就是回調函數的問題。

修改代碼，在調用sessionCheck()函數之前將this賦給新的變量self:

  /**
   * 獲取用戶手機號碼
   */
  getPhoneNumber: function(e) {
    //checkSession（callback) 登錄有效性驗證函數，接收回調函數
    //調用checkSession（callback) ，把getPhoneNumber的業務邏輯作為參數傳遞給驗證函數，以便checkSession（callback)在驗證登錄有效性之后做出相應的處理
    var self = this
    self.checkSession(function() {
　　......

驗證結果：

問題解決，代碼運行正常！

個人原創博客，轉載請注明來源地址：https://www.cnblogs.com/xyyt/p/9584575.html