小程序thirdScriptError, this.setData is not a function;

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

原创最新推荐文章于 2025-06-24 11:58:06 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#this #小程序 #setData #setInterval #bing

Front-End 专栏收录该内容

13 篇文章

订阅专栏

本文探讨了小程序开发中遇到的this指向问题，详细分析了前端控制台报错原因，并提供了将生命周期函数中的this传递到普通函数的解决方案。通过代码示例，展示了如何确保setData方法正确调用。

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

Problem

小程序开发过程中遇到this指向问题：

前端控制台报错：

thirdScriptError this.setData is not a function;

即：setData方法不存在。

Solution

将生命周期函数中的this传至普通函数；

通过以下代码，确定每个this分别指向哪里：

Page({
  data: {
    result: '',
  },

  onLoad: function(options) {
  },

  onReady: function() {
  },

  onShow: function() {
    let that = this;
    console.log('1: 生命周期函数中的this：', this);

    setInterval(function() {
      console.log('2: 定时函数中的this：', this);
      cronJob(that); // pass 'this' to normal method
    }, 10000);
  }
})

function cronJob(that) {
  console.log('3: 普通函数体中的this：', this);
  console.log('4: 普通函数体中的that：', that);
  wx.request({
    url: 'https://cn.bing.com/', // Just as an example
    method: 'GET',
    success: function(res) {
      let images = res.data.match(/\/az\/hprichbg\/rb\/(.){1,50}_1920x1080\.jpg/g); // regular expression
      let imageURL = `https://cn.bing.com${images[0]}`; // here must be https

      // that in wx.request
      this.setData({
        result: imageURL
      })
      console.log(that.data.result); // OK
    },
    fail: function(res) {
      console.log(res);
    }
  })
}