微信小程序中this指向作用域问题this.setData is not a function报错

在微信小程序中我们一般通过以下方式来修改data中的数据

this.setData({index1: e.detail.value})

比如在函数里面修改数据

bindFaChange1: function (e) {this.setData({index1: e.detail.value})}

但是当我们通过wx.request请求网络数据成功后绑定数据时候报以下错误

this.setData is not a function

代码如下：

doCalc:function(){wx.request({url: url,method:'POST',header: {'content-type': 'application/json' // 默认值},success: function (res) {if (res.data.code == 0){this.setData({maxCount: res.data.maxCount});}}})}

这是因为this作用域指向问题，success函数实际是一个闭包，无法直接通过this来setData

那么需要怎么修改呢？

我们通过将当前对象赋给一个新的对象

var _this = this;

然后使用_this 来setData就行了

完整代码

doCalc:function(){var _this = this;wx.request({url: url,method:'POST',header: {'content-type': 'application/json' // 默认值},success: function (res) {if (res.data.code == 0){_this.setData({maxCount: res.data.maxCount});}}})}

另外说一下，在es6中，使用箭头函数是不存在这个问题的

例如：

setTimeout( () => {console.log(this.type + ' says ' + say)}, 1000)

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

微信小程序中this指向作用域问题this.setData is not a function报错相关推荐

微信小程序(env: Windows,mp,1.05.2108130； lib: 2.19.4)报错
报错如下: 一看毫无头绪,找好久没发现.后来才发现是wxml有个小问题. {{item.text} 少打一个} ,所以报这个错好好检查一下自己的wxml是不是哪里少打或打错了没注意到. 该解决方案仅供 ...
微信小程序中this.setData is not a function报错问题
微信小程序中this.setData is not a function报错问题新手在编写小程序时经常会遇到的一种错误. 新手在编写小程序时经常会遇到的一种错误. 在小程序中,通常我们用setDat ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
微信小程序中如何使用setData修改数组或对象中的某一参数
本人也是刚开始接触微信小程序,在微信小程序中经常会遇到修改数组中某一项的值,比如array[0]或者是对象中object.item的值.这些值在微信小程序中都需要使用一个名为setData的方法,而这 ...
微信小程序中 wx:for=和wx:key=是什么关系
微信小程序中一般都会要求有wx:for=""和wx:key=""两个都存在,不然会有警告最简单的解释 wx:for="里面是要循环遍历的数组&quo ...
微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
在微信小程序中绘制图表（part2）
本期大纲 1.确定纵坐标的范围并绘制 2.根据真实数据绘制折线相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part3) 关注我的 github 项目查看完整代码. 确 ...
微信小程序中带参数返回上一页的方法总结（三种）
本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结(三种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 方法一把当前页面数据放入本地缓存( wx.setStor ...

微信小程序中this指向作用域问题this.setData is not a function报错

微信小程序中this指向作用域问题this.setData is not a function报错相关推荐

最新文章

热门文章