微信小程序setData数据太大解决方案

1、先码为敬

数据结构

speAllArr: [
  {
    id: '86',
    classifyIIShowFlag: false,
    firstData: {...}
    ...
  },{
    id: '87',
    classifyIIShowFlag: false,
    firstData: {...}
    ...
  }
]

setData的解决方案

// 添加数据
this.setData({
  ['speAllArr[' + speAllArr.length + ']']: res.data
})

// 设置开关
this.setData({
  ['speAllArr[' + dataset.index + '].classifyIIShowFlag']: !speAllArr[dataset.index].classifyIIShowFlag
})


2、再讲道理

  • 我们先说setData:

    微信小程序setData数据太大解决方案——setData介绍.png

    setData 函数用于将数据从逻辑层发送到视图层(异步),
    同时改变对应的 this.data 的值(同步)。

  • setData需要注意的事项

    1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,
      还会造成数据不一致。
    2. 仅支持设置可 JSON 化的数据。
    3. 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
    4. 请不要把 data 中任何一项的 value 设为 undefined ,
      否则这一项将不被设置并可能遗留一些潜在问题。

  • 如何解决需要设置的数据量过大的问题呢
    使用中括号 当然, 是英文的 " [] ",
    文档上也写得很清楚, data可接受的值是Object;
    我们只要吧这个Object传进去就OK了;

    1. 比如说我有一个数组, 当我改变数组中一个值的时候,
      讲道理我只需要跟新这个值就行了
    2. 道理是这样 如何才能指定更新到这个值呢?
    3. 用中括号, 把需要修改的key值拼接起来就OK了!
    this.setData({
      ['tempArr[' + needChangeArrIndex + '].flag']: true,
    })
    
    1. 这样就可以避免 setData的数据太大 带来的问题啦~
    2. 当然你也可以这样写:
    const key = `tempArr[${needChangeArrIndex}].flag`;
    theSetData[key] = true;
    this.setData(theSetData)
    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 每天的学习记录,可能有的地方写的不对,因为刚学,以后发现错的话会回来改掉整体流程 https://develope...
    有点健忘阅读 4,803评论 0 7
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,429评论 0 9
  • 前言: 上一篇文章我们介绍了.wxml和.wxss文件,这篇文章对js文件进行详细的讲解,首先贴上一个简单的js文...
    Smile__EveryDay阅读 20,321评论 0 7
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,342评论 0 3
  • 感恩, 感恩今早阳光明媚,心情愉悦,起床 感恩今早妈妈做好饭,等着我吃 感恩今天早上小侄女一早醒来就找我玩 感恩,...
    薄荷凉了夏_da9c阅读 154评论 0 0