微信小程序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 总结

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