Micro-channel applet this.setData () failure condition and solutions

The first: this represents the object changed

1.1 For chestnuts:

demo.js file

  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 Bunken

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

The code after the user clicks OK wanted mode block, the flag value becomes true, displayed on the page, but for such test results:
Here Insert Picture Description

1.2 reasons:

this code has been described above is not a global object, but instead wx.showModal () function

 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 Workaround: Save the global object to advance down as follows

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('用户点击取消')
        }
      }
    })
  }

The second: a list of rendering an array of objects appear Bug

2.1 Let's look at the official program

Here Insert Picture Description
Rendering visible the list when needed json object array format

2.2 I will reproduce a bug Kazakhstan

demo.js Code:

// 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 Dai码:

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

+ Interface displays the console output:
Here Insert Picture Description
not as we wish, but also amazing is that the console output display data I have provided in full compliance with json format

2.3 greater doubts

Suppose we json console output directly into the data as follows:

// 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
    // })
  }
})

Here Insert Picture Description
Can display normal

2.4 Solution

Although I do not know where the problem occurs, but I know the solution to the problem:
directly into the data array of objects by this.setData (), do not convert to json format

// 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
    })
  }
})