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

冷不防 2024-04-17 19:40 96阅读 0赞

## 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:
    
    ![format_png][]
    
    微信小程序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)

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zOTY1MTU2LTMwNTlmZDU3OTU1NmM3MjkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png