说说微信小程序开发的那些坑--setData - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

说说微信小程序开发的那些坑--setData

发表时间:2021-3-31

发布人:葵宇科技

浏览次数:42

this.setData估计是小程序中最经常用到的一个方法,但是要注意其实他是有限制的,忽略这些限制的话,会导致数据无法更新

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() {
    //依然假设通过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)
}

以上是我开发时遇到的坑,欢迎大家探讨指导,感谢阅读

相关案例查看更多