微信小程序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,
  })
  

  4. 这样就可以避免 setData的数据太大 带来的问题啦~
  5. 当然你也可以这样写：

  const key = `tempArr[${needChangeArrIndex}].flag`;
  theSetData[key] = true;
  this.setData(theSetData)