微信小程序 this.setData is not a function

最新推荐文章于 2025-06-24 11:58:06 发布

慕容屠苏

最新推荐文章于 2025-06-24 11:58:06 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序原生基础爬坑文章标签：微信小程序 this.setData is not

本文链接：https://blog.youkuaiyun.com/kerryqpw/article/details/78521295

微信小程序原生基础爬坑专栏收录该内容

52 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

在微信小程序的开发中，通常使用this.setData更新数据，但在wx.request的success回调中，可能会遇到this.setData不是一个函数的错误。解决办法是在request外保存this的引用，如var that = this;然后在success回调中用that.setData来避免问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序 this.setData is not a function

var that = this;
    wx.request({
      url: 'http://52.214.109.210:5000/news?offset=0&limit=10', //仅为示例，并非真实的接口地址
      data: {
        x: '',
        y: ''
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        console.log(res.data.results);

        that.setData({
          ajaxdata: res.data.results
        })

        wx.showToast({
          title: '成功',
          icon: 'success',
          duration: 2000
        })

      }
    })

小程序的一般函数中

  bindFaChange1: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

慕容屠苏

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

微信小程序报错：this.setData is not a function的解决办法

08-29

主要介绍了微信小程序报错：this.setData is not a function的解决办法的相关资料,希望通过本文能帮助到大家解决这样类似的问题，需要的朋友可以参考下

Vue 报错TypeError: this.$set is not a function 的解决方法

12-12

报错场景：将APi中得到的response数据，用Vue$set()使数据动态响应报错代码： methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: 'jsonp', data: { q: text, appKey: this.appKey, salt: this.salt, from: this.from, to:

参与评论您还未登录，请先登录后发表或查看评论

小程序that.setdata is not a function;

chengling5809的博客

07-10

498

that.setdata is not a function中的setData,D要为大写转载于:https://my.oschina.net/u/3512111/blog/130528...

原生微信小程序：用 `setData` 正确修改数组中的对象项状态（附实战技巧）

最新发布

deary

06-24

541

在微信小程序开发中，合理更新数组对象字段至关重要。推荐使用动态key精准更新（setData({[lists[${idx}].show]: !value})），而非直接修改数组引用。前者性能更优、不污染数据、适合复杂场景；后者会导致全量渲染并破坏响应式结构。可封装updateField工具函数提升复用性。建议中大型项目优先采用精准更新方法，以优化性能和维护性。

小程序 this.setData is not a function解决办法

ShadowSun的专栏

10-23

753

报错是因为函数中有 wx.showModal 或者 wx.request等请求，放在请求体里面时会报错。这也是第一句话也在外面不会报错，写在success里面会报错的原因。this组用域的问题，success函数包实际上是一个闭包，无法通过this来直接setData。我们需要将当，前对象赋予给一个新的对象。

TypeError: that.setData is not a function/使用了var that=this仍报错

qq_45128278的博客

05-31

5986

部分原代码： getProductInfo: function (e) { wx.request({ url: 'http://localhost:8080/getProductInfo', data: { "id": e }, header: { "Content-Type": "application/x-www-form-urlencoded" }, method: 'POST',

小程序this.setdata is not a function或者that.setdata is not a function

zhoudaxiaq的博客

05-11

763

that.setdata is not a function中的setData,D要为大写应该是that.setData is not a function 发现错误之后真是哭笑不得，这么简单的错误而导致程序没有响应，所以敲代码时一定要严谨仔细认真

异常处理——this.setData is not a function报错处理(小程序)

weixin_39437108的博客

12-06

1376

setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。很容易出现的错误目前有一下几点： 1.直接写在网络请求里面使用var that = this success里面写 that.setData（）这是没问题的 2.将网络请求写在定时器了面，而success函数是一个闭包，无法直接写that.setData（），我就是在这边吃过亏！错误的编写如下：正确的应该是： ...

微信小程序-报错this.setData is not a function

weixin_43794332的博客

02-28

519

原代码： this.setData({ id:res.result.data[0]._id }) 修改成： var that=this; that.setData({ id:res.result.data[0]._id })

微信小程序this.setData is not a function报错

qq_49552046的博客

01-23

887

在小程序中我们一般用this.setData来改变data中的值但有的时候会出错，我们拿一个错误的例子来说明一下 doCalc:function(){ wx.request({ url: url, method:'POST', header: { 'content-type': 'application/json' // 默认值 }, success: function (res) { if (res.dat

【微信】微信小程序 调用this.setData报错this.setData is not a function;

weixin_34348111的博客

05-23

187

在调用方法过程中报错如下：代码如下： Page({ /** * 页面的初始数据 */ data: { userLocalInfo:'用户地址' }, /** * 返回swapping页面 */ backSwapping: function(){ wx.navigateBack({ ...

关于微信小程序that.setData is not a function解决原有

优快云 for recording problems

04-22

8629

先来看看我之前报错的源代码第一次用this不行，结果用that保存this指向，还是会报错。最后解决方案为，讲var that = this；改变为全局即可快去试试吧~ ...

微信小程序之this.setData

热门推荐

anmo1221的博客

02-08

3万+

Page.prototype.setData()setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。注意：直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。setData() 参数格式接受一个对象，以 key，value 的形式表示将 this.data 中的 ke

微信小程序.setdata is not a function解决办法

mihaoyun.com的专栏

02-16

866

网上是：this.setData is not a function，解决方法是将var that = this；改变为全局即可，但没有作用。后来仔细查看，没有使用大写，将setdata中的d改成大写的就可以了 ...

this.$set is not a function

weixin_42613360的博客

01-07

4763

这意味着你在尝试使用一个不存在的函数。 $set 是 Vue.js 中的一个实例方法，用于在响应式数据中添加/修改属性。如果你没有在你的 Vue 组件中正确引入 $set，那么在你的组件实例中就不会存在这个方法。你可以尝试检查你的代码，确保你正确引入了 Vue 并且你的组件定义中正确使用了它。希望这可以帮助你。如果你还有疑问，请随时继续提问。 ...

Nodejs: protobuf 报错 TypeError: this.$set is not a function

pengpengzhou的博客

07-20

2474

在使用protobufjs包的时候，每次创建对象的时候都必须用关键字“new”，否则就会报“TypeError: this.$set is not a function” 如下面这段代码 "var protoIpInfo = Model.IpInfo({...})" 就应该是"var protoIpInfo = new Model.IpInfo({...})" 。 message IpInfo{ required uint32 ipStart = 1; required uint32 .

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

angyangan9569的博客

11-15

1129

在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({ index1: e.detail.value }) 比如在函数里面修改数据 bindFaChange1: function (e) { this.setData({ index1: e.detail.value }) } 但是当我们通过wx.req...

微信小程序 e.stopPropagation is not a function

06-14

<think>我们正在解决微信小程序中`e.stopPropagation`报错的问题。根据用户反馈，错误信息为`e.stopPropagationisnotafunction`。下面将分析原因并提供解决方案。###问题分析在微信小程序中，事件对象`e`的结构与Web标准事件对象有所不同。在Web中，事件对象有`stopPropagation`方法，但在小程序中，事件对象并没有直接提供这个方法。小程序的事件对象中，阻止事件冒泡的方法是`e.stopPropagation`吗？实际上，小程序的事件对象中用于阻止冒泡的方法是`e.stopPropagation()`吗？我们来看一下小程序的官方文档。根据微信小程序官方文档[^1]：-小程序的事件分为冒泡事件和非冒泡事件。-要阻止事件冒泡，可以使用`catch`绑定事件（它会自动阻止冒泡）或者在事件处理函数中调用`e.stopPropagation()`方法。但是，请注意：**在基础库版本低于2.7.1时，事件对象并没有提供`stopPropagation`方法**。在基础库2.7.1及以上版本，事件对象才支持`stopPropagation`方法。因此，出现`e.stopPropagationisnotafunction`错误的原因可能是：1.基础库版本过低（低于2.7.1），不支持`e.stopPropagation`方法。2.错误地使用了`e.stopPropagation`（例如，拼写错误或调用方式错误）。###解决方案####方案1：升级基础库版本确保小程序的基础库版本在**2.7.1**及以上。可以在微信开发者工具中查看和设置基础库版本：-打开微信开发者工具->详情->项目配置，查看“基础库版本”。-如果基础库版本过低，可以在“调试基础库”中选择较高的版本（2.7.1以上）。####方案2：使用`catch`事件绑定代替如果无法升级基础库，或者需要兼容低版本，可以使用`catch`绑定事件来阻止事件冒泡。这是小程序中推荐的做法。```wxml<viewbindtouchstart="handleParentTouchStart"><viewcatchtouchstart="handleChildTouchStart">子组件</view></view>```####方案3：使用`e.stopPropagation()`的兼容写法如果必须在事件处理函数中阻止冒泡，并且需要兼容低版本，可以这样写：```javascripthandleChildTouchStart(e){//基础库2.7.1及以上支持stopPropagationif(e.stopPropagation){e.stopPropagation();}else{//低版本基础库，使用其他方式阻止冒泡（如使用catch绑定）//注意：低版本无法在事件处理函数中阻止冒泡，所以必须使用catch绑定console.warn('基础库版本过低，不支持e.stopPropagation');}//其他逻辑}```但是，请注意：在低版本基础库中，事件处理函数内无法阻止冒泡。因此，对于低版本，唯一的方法就是使用`catch`绑定事件。####方案4：使用`mut-bind`进行互斥事件处理（高级用法）如果事件需要被多个节点响应，但又不想冒泡，可以使用`mut-bind`。但这不是解决此问题的直接方法，所以不展开。###完整示例假设我们有一个父组件和一个子组件，点击子组件时不触发父组件的`touchstart`事件。**wxml文件：**```wxml<viewclass="parent"bindtouchstart="parentTouchStart">父组件区域<viewclass="child"catchtouchstart="childTouchStart">子组件区域（使用catch绑定）</view></view>```**js文件：**```javascriptPage({parentTouchStart(){console.log('父组件touchstart被触发');},childTouchStart(e){console.log('子组件touchstart被触发，不会触发父组件');//如果使用bindtouchstart绑定，则需要在这里阻止冒泡，但低版本不支持//所以这里我们使用catchtouchstart，无需再写stopPropagation}});```###注意事项1.**基础库版本**：确保基础库版本>=2.7.1才能使用`e.stopPropagation()`。2.**事件绑定方式**：优先使用`catch`绑定来阻止冒泡，因为它兼容所有版本。3.**非冒泡事件**：有些事件是非冒泡的（如`scroll`），不需要阻止冒泡。###相关问题1.微信小程序中如何同时阻止事件冒泡和默认行为？2.自定义组件中如何阻止事件冒泡？3.微信小程序的事件对象有哪些属性和方法？4.如何在小程序中实现事件捕获？5.微信小程序的基础库版本如何升级？>通过升级基础库或使用`catch`绑定事件，可以有效解决`e.stopPropagationisnotafunction`的问题[^1][^2]。[^1]:微信小程序官方文档-事件[^2]:微信小程序基础库更新日志</think>### 微信小程序 `e.stopPropagation is not a function` 解决方案在微信小程序中遇到 `e.stopPropagation is not a function` 错误，通常是由于**基础库版本过低**或**事件对象使用方式错误**导致的。以下是详细解决方案： --- #### 🔧 解决方案1：升级基础库版本（推荐） 微信小程序在 **基础库 v2.7.1+** 才正式支持 `e.stopPropagation()` 方法： ```bash # 修改 project.config.json { "miniprogramRoot": "miniprogram/", "libVersion": "2.16.0" // 使用较新基础库版本 } ``` > **验证方式**：微信开发者工具 → 详情 → 项目配置 → 基础库版本 ≥ 2.7.1[^1] --- #### 🔧 解决方案2：使用 `catch` 事件前缀（兼容方案）对于低版本基础库，使用 `catch` 绑定事件自动阻止冒泡： ```wxml  <view bindtouchstart="parentHandler">  <view catchtouchstart="childHandler">点击区域</view> </view> ``` --- #### 🔧 解决方案3：兼容写法（高低版本通用）在事件处理函数中添加兼容逻辑： ```javascript // 子组件事件处理 childHandler(e) { // 新版本使用 stopPropagation if (typeof e.stopPropagation === 'function') { e.stopPropagation() } // 低版本兼容方案 else { this.setData({ _stopPropagation: true }) // 设置标记 } console.log("子组件事件触发") } // 父组件事件处理 parentHandler() { if (this.data._stopPropagation) return // 通过标记阻止执行 console.log("父组件事件触发") } ``` --- #### 🔧 解决方案4：自定义事件传递（组件间通信）对于自定义组件，通过 `triggerEvent` 控制冒泡： ```javascript // 子组件内部 Component({ methods: { handleTap(e) { this.triggerEvent('customevent', {}, { bubbles: false, // 禁止冒泡 composed: false }) } } }) ``` --- ### ⚠️ 关键注意事项 1. **基础库版本检查**： ```javascript console.log(wx.getSystemInfoSync().SDKVersion) // 输出当前基础库版本 ``` 2. **事件对象差异**： - 小程序事件对象 `e` 与浏览器事件对象不同 - 仅支持部分原生方法（如 `stopPropagation` 需基础库≥2.7.1） 3. **特殊事件类型**： - `touchstart`/`touchmove` 等触摸事件支持冒泡控制 - 部分自定义事件可能不受影响 --- ### 🌰 完整示例代码 ```wxml  <view bind:touchstart="parentTouch"> <my-component bind:customevent="childEvent" /> </view>  <view catch:touchstart="handleChildTouch">按钮</view> ``` ```javascript // 自定义组件逻辑 Component({ methods: { handleChildTouch(e) { // 新版本直接阻止 e.stopPropagation?.() // 触发无冒泡的自定义事件 this.triggerEvent('customevent', null, { bubbles: false }) } } }) ``` --- ### 📚 相关问题 1. 如何检测微信小程序的基础库版本？ 2. 小程序自定义组件如何完全阻止事件冒泡？ 3. `catch` 和 `mut-bind` 在事件处理中有何区别？ 4. 小程序的事件对象包含哪些特有属性？ 5. 低版本基础库下有哪些替代 `stopPropagation` 的方案？ > 通过升级基础库或使用 `catch` 事件绑定，可有效解决 `stopPropagation` 不可用问题[^1][^2]。跨组件通信推荐使用 `triggerEvent` 的冒泡控制参数。