微信小程序this.setData失效情况与解决方案
目录
微信小程序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 总结
这是我初学微信小程序总结的一些小坑所作的笔记，不过对于第二种，如果有人知道这是为啥，希望赐教