this.setData is not a function;+小程序中this指向的解释（微信开发者工具报错解决）

最新推荐文章于 2024-07-17 08:58:28 发布

bohn

最新推荐文章于 2024-07-17 08:58:28 发布

阅读量1.3k

点赞数

分类专栏：微信文章标签：微信小程序 this指向

本文链接：https://blog.csdn.net/qq_39458856/article/details/82223904

版权

微信专栏收录该内容

5 篇文章 0 订阅

订阅专栏

附：代码

Page({
  data:{
    weather:"NAN",
    city:""
  },
  getCity:function(e){
    console.log("input")
    console.log(e.detail.value)
    this.setData({
     city:e.detail.value 
    })
  },
  Click: function () {
    let url = `https://free-api.heweather.com/s6/weather/now?location=${this.data.city}&key=cc79554fd87c447eab8e05a605940401`;
    console.log(this.data.city)
    //发送http请求到第三方服务器
    wx.request({
      url: url,
      success: function (res) {
        console.log(res)
        //获取天气情况
        let weather=res.data.HeWeather6[0].now.cond_txt;
        console.log(weather)
        this.setData({
          //修改data中的值
          weather:weather
        })
      }
    })
  }
})

原因是因为

在调用wx.request之后this指代的已经不是page对象，而是wx.request对象了

解决办法：

将this提前赋值给一个变量

let page=this;

wx.request({

...............

})

Page({
  data:{
    weather:"NAN",
    city:""
  },
  getCity:function(e){
    console.log("input")
    console.log(e.detail.value)
    this.setData({
     city:e.detail.value 
    })
  },
  Click: function () {
    let url = `https://free-api.heweather.com/s6/weather/now?location=${this.data.city}&key=cc79554fd87c447eab8e05a605940401`;
    console.log(this.data.city)
    let page=this;
    //发送http请求到第三方服务器
    wx.request({
      url: url,
      success: function (res) {
        console.log(res)
        //获取天气情况
        let weather=res.data.HeWeather6[0].now.cond_txt;
        console.log(weather)
        page.setData({
          //修改data中的值
          weather:weather
        })
      }
    })
  }
})

第二种解决办法是使用es6的箭头函数

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

有道思否论坛出的题大家看一下:

  <body>
    <div id="d1">1
    </div>
  </body>
<script>
    let obj ={
        name:"obj",
        test1:function(){
            document.getElementById("d1").addEventListener("click",()=>{
                console.log("test1",this);
            })
        },
        test2:()=>{
            document.getElementById("d1").addEventListener("click",()=>{
                console.log("test2",this);
            })
        },
        test3:()=>{
            console.log("test3",this);
        }
    }
    obj.test3();
    obj.test1();
    obj.test2();
</script>

1、test1中的箭头函数的this指向的是test1函数内部绑定的this,即也就是定义它的地方:obj
2、test2中的箭头函数的外层还是箭头函数，得再往外找一层，找到了obj的外层，即window
3、test3中的箭头函数的外层是obj的外层，即window