微信小程序报错 TypeError: Cannot read property ‘setData‘ of undefined
·
原因
TypeError: Cannot read property 'setData' of undefined 通常是因为在JavaScript的回调函数中,this 的指向不是你所期望的对象。
- 比如说我的这段代码,我在云函数的回调中使用this.setData就报错了。
解决方案不仅仅对云函数有用,对于绝大部分this.setData报错都有用
getGoodDetail(id) {
const url = `${baseUrl}id`;
console.log(url);
//调用云函数
wx.cloud.callFunction({
name: 'GET',
data: {
url: url,
},
success: function (res) {
var result = JSON.parse(res.result);
const productData = result.data;
this.setData({
product: productData,
});
},
fail: console.error,
});
},
在代码中,this 在 success 回调函数中被用于调用 setData 方法,但是在回调函数的上下文中,this 并不指向外部的 getGoodDetail 函数的实例。这是因为在JavaScript中,函数的上下文(即 this 的值)是在函数被调用时确定的,而不是在函数被定义时确定的。
解决方案
-
使用箭头函数(推荐)
箭头函数不会创建自己的this上下文,而是继承自它们的父作用域。这意味着你可以在外部函数中使用箭头函数来保持this的上下文不变。getGoodDetail(id) { const url = `${baseUrl}id`; wx.cloud.callFunction({ name: 'GET', data: { url: url, }, success: (res) => { // 使用箭头函数 var result = JSON.parse(res.result); const productData = result.data; this.setData({ product: productData, }); }, fail: console.error, }); } -
使用变量保存
this的引用
在进入wx.cloud.callFunction调用之前,你可以创建一个变量(通常命名为that或self)来存储this的当前值,然后在你的回调函数中使用这个变量。getGoodDetail(id) { const url = `${baseUrl}id`; var that = this; // 保存this的引用 wx.cloud.callFunction({ name: 'GET', data: { url: url, }, success: function (res) { var result = JSON.parse(res.result); const productData = result.data; that.setData({ // 使用that代替this product: productData, }); }, fail: console.error, }); }
选择其中一种方式修改你的代码,应该就可以解决 TypeError: Cannot read property 'setData' of undefined 这个问题了。
更多推荐

所有评论(0)