微信小程序开发——使用回调函数出现异常: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)
......

详细截图:

异常代码相关源码:

复制代码
 1 Page({
 2   data: {
 3     phone: ""
 4   },
 5   ......
 6   /**
 7    * 获取用户手机号码
 8    */
 9   getPhoneNumber: function(e) {
10     //checkSession(callback) 登录有效性验证函数,接收回调函数
11     //调用checkSession(callback) ,把getPhoneNumber的业务逻辑作为参数传递给验证函数,以便checkSession(callback)在验证登录有效性之后做出相应的处理
12     this.checkSession(function() {
13       //用户取消获取手机号码授权
14       if (e.detail.errMsg == "getPhoneNumber:fail user deny") return;
15       //用户授权获取手机号码
16       var sessionKey = wx.getStorageSync("session_key")
17       //3. 解密手机号码信息
18       var self=this
19       wx.request({
20         url: 'http://xxxx.xxxxs.com/demo/demo.php',
21         data: {
22           'encryptedData': e.detail.encryptedData,
23           'iv': e.detail.iv,
24           'session_key': sessionKey
25         },
26         method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
27         header: {
28           'content-type': 'application/json'
29         }, // 设置请求的 header
30         success: function(data2) {
31           wx.hideLoading()
32           if (data2.statusCode == 200) { 
33             //成功获取手机号码              
34             if (data2.data.phoneNumber){
35               wx.showToast({
36                 title: data2.data.phoneNumber
37               })
38               self.setData({    //******出现异常的代码部分********//
39                 phone: '新消息'
40               })      
41             }else{
42               console.log(data2.data)
43             }   
44           }
45         },
46         fail: function(err) {
47           console.log(err);
48         }
49       })
50     })
51   }
52 })
复制代码

异常分析:

js文件中data的确有变量phone,一般来说,是不会出现错误异常的。既然出现了异常,那就应该是这部分代码中有其他的一些代码影响到了。

细细分析这部分代码,除了把获取手机号码的业务逻辑作为 检验登录有效性函数的回调函数之外,其他都是比较常用的代码,所以问题很有可能就是回调函数的问题。

修改代码,在调用sessionCheck()函数之前将this赋给新的变量self:

复制代码
1   /**
2    * 获取用户手机号码
3    */
4   getPhoneNumber: function(e) {
5     //checkSession(callback) 登录有效性验证函数,接收回调函数
6     //调用checkSession(callback) ,把getPhoneNumber的业务逻辑作为参数传递给验证函数,以便checkSession(callback)在验证登录有效性之后做出相应的处理
7     var self = this
8     self.checkSession(function() {
9   ......
复制代码

验证结果:

问题解决,代码运行正常!

个人原创博客,转载请注明来源地址:https://www.cnblogs.com/xyyt/p/9584575.html

posted on   逍遥云天  阅读(59374)  评论(0编辑  收藏  举报

编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
历史上的今天:
2014-09-04 图片添加热点MAP之后连接无效的解决方法
2014-09-04 使用DW工具给图片添加热点MAP
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示