微信小程序this.setData()失效情况与解决方案

微信小程序this.setData()失效情况与解决方案

第一种:this代表的对象改变了

1.1 举个栗子:

demo.js文件

  Page({

  data: {
    flag:false
  },
  test:function(){
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success (res) {
        if (res.confirm) {
          console.log('用户点击确定')
          this.setData({
            flag:true
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
})

demo.wxml文件

<!--pages/demo/demo.wxml-->
<button bindtap="test">测试</button>
<view>flag:{{flag}}</view>

上述代码本来是想在用户点击确定模态框后,将flag值变为true,在页面上显示,测试结果却为这样:
在这里插入图片描述

1.2 原因:

上述代码的 this 已经不是全局对象了,而变成了wx.showModal()函数

 wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success (res) {
        if (res.confirm) {
          console.log('用户点击确定')
		//这里的this代表的是wx.showModal()函数
          this.setData({
            flag:true
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
1.3 解决方法:将全局对象先提前保存下来,如下
test:function(){
	//这里的that代表了全局对象,必须在wx.shouModal外声明
	var that = this
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success (res) {
        if (res.confirm) {
          console.log('用户点击确定')
          //这样写就不会有语义误差了
          that.setData({
            flag:true
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }

第二种:列表渲染对象数组出现Bug

2.1 先来看看官方程序

在这里插入图片描述
可见列表渲染的时候需要 json 格式的对象数组

2.2 我来将bug复现一哈

demo.js代码:

// pages/demo/demo.js
Page({

  data: {
    arrayJson:''
  },
  test:function(){
    //声明对象数组
    var arrayList = []

    //新建两个对象
    var array1 = {
      id:'001',
      name:'CSDN'
    }
    var array2 = {
      id:'002',
      name:'大青儿'
    }
    //放入数组中
    arrayList[0] = array1
    arrayList[1] = array2

    var json = JSON.stringify(arrayList)
    console.log(json)

    this.setData({
      arrayJson:json
    })
  }
})

demo.wxml代码:

<!--pages/demo/demo.wxml-->
<button bindtap="test">测试</button>
<block wx:for="{{arrayJson}}">
  <view>id:{{item.id}}</view>
  <view>name:{{item.name}}</view>
</block>

界面显示+控制台输出:
在这里插入图片描述
并不如人所愿,而且神奇的是,控制台输出显示我提供的数据完全符合json格式的

2.3 更大的疑惑

假设我们把控制台输出的json直接放入data中,如下:

// pages/demo/demo.js
Page({

  data: {
    arrayJson:[{"id":"001","name":"CSDN"},{"id":"002","name":"大青儿"}]
  },
  test:function(){
    // //声明对象数组
    // var arrayList = []

    // //新建两个对象
    // var array1 = {
    //   id:'001',
    //   name:'CSDN'
    // }
    // var array2 = {
    //   id:'002',
    //   name:'大青儿'
    // }
    // //放入数组中
    // arrayList[0] = array1
    // arrayList[1] = array2

    // var json = JSON.stringify(arrayList)
    // console.log(json)

    // this.setData({
    //   arrayJson:json
    // })
  }
})

在这里插入图片描述
都能正常显示

2.4 解决方法

虽然我不知道问题出现在哪,但是我知道问题的解决方法:
直接将对象数组通过this.setData()放入data,不用转换为 json 格式

// pages/demo/demo.js
Page({

  data: {
    arrayJson:""
  },
  test:function(){
    //声明对象数组
    var arrayList = []

    //新建两个对象
    var array1 = {
      id:'001',
      name:'CSDN'
    }
    var array2 = {
      id:'002',
      name:'大青儿'
    }
    //放入数组中
    arrayList[0] = array1
    arrayList[1] = array2

    // var json = JSON.stringify(arrayList)
    // console.log(json)

    this.setData({
      arrayJson:arrayList
    })
  }
})

此时结果能正常显示:
在这里插入图片描述

2.5 总结

这是我初学微信小程序总结的一些小坑所作的笔记,不过对于第二种,如果有人知道这是为啥,希望赐教

  • 13
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
### 回答1: this.setData微信小程序中用于更新页面数据的方法。它可以将数据从逻辑层发送到视图层,同时改变对应的this.data的值。这样,页面就可以根据数据的变化来动态更新视图,实现数据绑定的效果。 ### 回答2: 微信小程序中的this.setData方法是用来将数据绑定到视图中的重要方法。它是指当前页面的数据对象,并把一个或多个属性值赋值给该对象。一旦数据被赋值,小程序就会自动重新渲染页面。因此,通过setData可以实现动态更新页面内容,提高小程序的实时响应能力和用户体验。 一般来说,我们在微信小程序中使用setData方法有两种情况。第一种是在数据初始化时,我们可以采用如下格式: ```javascript Page({ data: { name: 'xxxx' }, onLoad: function () { this.setData({ name: '张三' }) } }) ``` 在这个例子中,我们通过在onLoad事件中调用setData方法来将名称更新为张三。这样,在小程序中,data对象将包含一个名为name的属性,它的初始值为xxxx,但是一旦onLoad事件被触发,name将被更新为张三。 第二种情况是在用户与小程序交互时,我们可以通过setData方法更新小程序的内部状态,并实现动态刷新效果。例如: ```javascript Page({ data: { count: 0 }, addOne: function () { this.setData({ count: this.data.count + 1 }) } }) ``` 在这个例子中,我们定义了一个名为count的属性,用于保存当前计数器的值。当用户点击按钮时,我们可以通过setData方法将count属性的值加1。由于小程序会自动渲染页面,所以用户可以实时看到计数器的变化。 总之,通过setData方法,我们可以很方便地实现微信小程序中的数据绑定和动态更新。无论是初始化数据还是响应用户交互事件,setData都是必不可少的方法,值得我们掌握和深入理解。 ### 回答3: 微信小程序的this.setData()方法是用来设置页面中的数据的。通过该方法,我们可以把数据更新到小程序的页面上,使页面上的数据与小程序内部的数据保持同步。 this.setData()方法的使用很简单,我们只需要把需要更新的数据以对象的形式传递给该方法就可以了。例如: this.setData({ name: '小明', age: 18, gender: '男' }) 上述代码中,我们需要更新三个数据,分别是name、age和gender。这三个数据都被写成了一个对象,并作为参数传递给了this.setData()方法。 在实际开发中,我们一般会把需要更新的数据以变量的形式保存在js文件中,然后在需要更新数据的地方调用this.setData()方法进行更新。例如: let name = '小明' let age = 18 let gender = '男' this.setData({ name, age, gender }) 上述代码与之前的代码作用是相同的,只不过我们把需要更新的数据先保存在了变量中,然后再进行更新。这样可以使代码更具可读性,也更加方便管理。 总之,this.setData()方法是微信小程序中非常重要的一个方法,它可以让我们在需要的时候随时更新页面中的数据,使小程序的界面更加灵活多变。在实际开发中,我们应当熟练掌握该方法的使用,以便更好地开发出高质量的小程序
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大青儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值