小程序setData详解

1. 参数接受一个对象，以 key，value 的形式表示
2. 可以一下设置一个或多个data数据

this.setData({  
   list:'change data',  
   info:'change data'  
})  
复制代码

3. key可以以数据路径的形式给出（路径形式的key必须带引号）+数据可以不预设

 this.setData({
      'array[0].text':'changed data'  //数据路径key必须带‘’引号
    })

 this.setData({
      'object.text': 'changed data'   //数据路径key必须带‘’引号
    });
    等于
     this.setData({
      object:{
      text: 'changed data'   
      }
    });
复制代码

4. key值可以为变量，为变量的时候要用[ ]引起来

page({  
  data:{  
    todos:[ 
    {id:0,text:'abc',isDelete:false}, 
    {id:1,text:'abc',isDelete:false},
    {id:2,text:'abc',isDelete:false} ]   //array
  },  
  change(e){  
    var index = e.currentTarget.dataset.id;  
    var deletedtodo='todos['+index+'].idDelete';  
    this.setData({  
       [deletedtodo]:true  
    })  
  }  
})  
复制代码

5. 单次设置的数据不能超过1024KB，请尽量避免一次设置过多的数据 一般情况下，更新items的操作可能如下：

loadItems() {
    //假设通过API获取到新的列表数据：newItems
    const { items } = this.data;  //deconstructing... items from this.data;
    this.setData({
       items: items.concat(newItems)  //append new data...
  })
}
//The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.//

复制代码

如果完整items的数据量不大的时候，这样做也是可以的，但是列表的数据比较多的时候，后面loadItems时setData的数据就会变很大，超过一定值（1048576）后就会报以下错误，然后列表无法再加载更多

数据传输长度为 xxxxxx 已经超过最大长度 1048576

若遇到这样的情况，我的解决方法是

loadItems() {
    //依然假设通过API获取到新的列表数据：newItems
    const { items } = this.data;
    const start = items.length;
    const updateItems = newItems.reduce((updateItems, item, index) => { 
        updateItems[`items[${start + index}]`] = item;   //use template literal
        return updateItems;
    }, {//inital values of updateItems//}) //this is {}
  //updateItems 示例： { items[0]: 'content', items[1]: 'content', ... }
  this.setData(updateItems)
}
复制代码

GREAT idea!!

方法一、

Page({

  data: {
    list: [ 1, 2, 3 ]
  },


  /**
   * Lifecycle function--Called when page load
   */
  onLoad: function (options) {
    let that = this;
    let self = that.data;

    var newList = [4,5];

    let length = self.list.length;
    console.log(length)

    let newData = newList.reduce((acc, v, i) => {

      acc[`list[${length + i}]`] = v;
      return acc;
    }, {});//return a {}

    console.log(newData)
    that.setData(newData)

    console.log(self)
  },
)}
复制代码

方法二、

 data: {
  list: [[1, 1], [2, 2], [3, 3]]
},


/**
 * Lifecycle function--Called when page load
 */
onLoad: function (options) {
  let that = this;
  let self = that.data;

  var newList = [4, 4];

  let length = self.list.length;
  console.log(length)
  var newData = {};
  newData[`list[${length}]`] = newList;

  console.log(newData)
  that.setData(newData)

  console.log(self)
},
复制代码

6. 可以定义变量名称一致

// example/test/test.js

Page({

  data: {
     
    ceshi: [2,3,4]
  },


  /**
   * Lifecycle function--Called when page load
   */
 

  /**
   * Lifecycle function--Called when page is initially rendered
   */
  onReady: function () {
    var ceshi=this.data.ceshi;
    ceshi.push(5)
    this.setData(
      {ceshi}  //this will overwrite the ceshi key in data object
    )
    console.log(ceshix)
    console.log(this.data)
   
   
  },
复制代码

在方法中，我们定义ceshi变量让其等于that.data.ceshi; 然后对ceshi进行操作，其实就是对that.data.ceshi进行操作，而that.setData({ceshi})就等同于that.setData({ceshi : ceshi }) ;