微信小程序如何用setData修改data中的数据

wx.request({
      url: url,
      data:{
        classid:classid
      },
      header: {
        'content-type' : 'application/json'
      },
      success:function(res){
        console.log(res.data);
      }
    })

打印数据如下：

       这里通过接口向后台请求接收到了数据res.data,打印到打印台可见其数据，可是如何将数据渲染到页面呢？这里用到了一个函数setData({})，用res.data得到的数据给data赋值。

我们先举个例子，在 wx.request({})里直接加以下代码

this.setData({teacher:'张三'})

data里自定义一个值teacher:null,

data: {
    teacher:null
  },

前台代码用{{teacher}}表示传过来的值，此时页面就显示了传过来的数据 ‘张三’。

借用上面例子，我同样先在data中自定义一个值 teacher:null , 然后在success:function(res){}里用setData({})传值，

success:function(res){ 
        console.log(res.data);
        this.setData({
          teacher:res.data
        });
      }

        但是报错了，为什么呢？问题出在 this 上了，这里success就是一个函数，this 直接在wx.request({})里写倒是没事，可是写到success函数里，这个this就变味儿了，当前对象发生改变，别着急，我们在外边定义一下this就好了，完整代码给大家参考一下：

onLoad: function (options) {
    var that = this;
    var url = "https://www.lishuming.top/pj/index.php/student/api/teachers";
    var student = wx.getStorageSync('student');
    var classid = student.classid;
    // console.log(classid);
    wx.request({
      url: url,
      data:{
        classid:classid
      },
      header: {
        'content-type' : 'application/json'
      },
      success:function(res){
        console.log(res.data);
        that.setData({
          teacher:res.data
        });
      }
    })
  },

        除了定义this外ES6标准新增了一种新的函数，叫 “箭头函数”，现在很流行哦，大家可以看一些相关教程了解一下，在这里，只需稍微改动一下上面代码，将 success:function(res)  改为  success:(res)=>  即可，不用定义this了，这里就不会再影响了。

        最近在学微信小程序，希望有志同道合的小伙伴一起来探讨，有什么问题或者补充的，欢迎留言，期待与你共同学习，共同进步哦！