码迷,mamicode.com
首页 > 微信 > 详细

「Krystalcsdn」的原创文章 微信小程序Cannot read property 'setData' of undefined问题解决 两种方法可用

时间:2020-05-15 22:56:03      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:微信   宽度   win   严格   解决方法   执行环境   his   箭头   hat   

微信小程序Cannot read property ‘setData‘ of undefined问题解决

Krystalcsdn 2020-03-08 23:57:39 300 收藏
展开
今天写小程序,需要读取窗口高度然后设置scroll-view高度,在this.setData时报错“Cannot read property ‘setData‘ of undefined”,代码如下:

onShow: function () {
wx.getSystemInfo({
success: function(res) {
this.setData({
scrollHeight:res.windowHeight-100*res.windowHeight/750
});
},
});
},
原因是getSystemInfo函数体中的this指向闭包,而不是page对象,所以需要在函数外定义this才能用。

onShow: function () {
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData({
scrollHeight:res.windowHeight-100*res.windowHeight/750
});
console.log(that.data.scrollHeight);
},
});
},
另外一种解决方法是使用箭头函数,ES6规定箭头函数没有自己的this,导致内部的this指向外层代码的this(最近的this),这个指向在定义时就已经确定,不会在执行时再指向执行环境的this。

因此可以:

onShow() {
wx.getSystemInfo({
success: (res) => {
//80为顶部搜索框区域高度 rpx转px 屏幕宽度/750
this.setData({
scrollHeight: res.windowHeight - (100 * res.windowWidth / 750)
});
}
})
},
普通函数this和箭头函数this对比分析详细见这篇文章https://segmentfault.com/a/1190000014027459

关于this的指向
总的来说:
this指向执行主体

分几种情况:
普通函数执行时,如果没有执行主体,在非严格模式下指向window,在严格模式下指向undefined。
箭头函数没有this,它继承上下文的this。
构造函数里的this指向生成的实例对象。
事件绑定函数中的this指向当前操作的元素。
call, apply, bind把函数中的this改为指定的执行对象。
————————————————
版权声明:本文为CSDN博主「Krystalcsdn」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/KrystalCSDN/article/details/104743327

「Krystalcsdn」的原创文章 微信小程序Cannot read property 'setData' of undefined问题解决 两种方法可用

标签:微信   宽度   win   严格   解决方法   执行环境   his   箭头   hat   

原文地址:https://www.cnblogs.com/puyunzhong/p/12897700.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!