說說微信小程序開發的那些坑2--setData

this.setData估計是小程序中最常常用到的一個方法,可是要注意其實他是有限制的,忽略這些限制的話,會致使數據沒法更新小程序

setData的反模式:
-- 短期頻繁進行setData操做
--頁面進入後臺後依然進行setData操做
-- 使用setData一次性設置太多的數據this

這裏重點說一下第3點,獲取更新列表的時候很是容易觸犯第三點,舉個栗子:
假設Page中data有items的數據,裝着列表的數據code

Page({
  data: {
    items: [],
  }
});

通常狀況下,更新items的操做可能以下:開發

loadItems() {
    //假設經過API獲取到新的列表數據:newItems
    const { items } = this.data;
    this.setData({
    items: items.concat(newItems)
  })
}

若是完整items的數據量不大的時候,這樣作也是能夠的,可是列表的數據比較多的時候,後面loadItems時setData的數據就會變很大,超過必定值(1048576)後就會報如下錯誤,而後列表沒法再加載更多it

數據傳輸長度爲 xxxxxx 已經超過最大長度 1048576後臺

若遇到這樣的狀況,個人解決方法是date

loadItems() {
    //依然假設經過API獲取到新的列表數據:newItems
    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)
}

以上是我開發時遇到的坑,歡迎你們探討指導,感謝閱讀程序

相關文章
相關標籤/搜索