小程序中 setData 的使用方法

this.setData在微信小程序中的使用方法有一定的限制。

反模式:

  • 短时间频繁进行setData操作
  • 页面进入后台后依然进行setData操作
  • 使用setData一次性设置太多的数据

这里重点说一下第3点,获取更新列表的时候非常容易触犯第三点,举个栗子:
假设Page中data有items的数据,装着列表的数据:
Page({
data: {
items: [],
}
});

一般情况下,更新items的操作可能如下:
loadItems() {
//假设通过API获取到新的列表数据:newItems
const { items } = this.data;
this.setData({
items: items.concat(newItems)
})
}

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

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

若遇到这样的情况

loadItems() {
const { items } = this.data;
const start = items.length;
const updateItems = newItems.reduce((updateItems, item, index) => {
const key = `items[${start + index}]`;
updateItems[key] = item;
return updateItems;
}, {})
//updateItems 示例: { items[0]: 'content', item[1]: 'content', ... }
this.setData(updateItems)
}

根据相关规定,评论暂时关闭。