微信小程序开发小技巧：setState改变数据中的对象属性

terry 2年前 (2023-09-22) 阅读数 71 #移动小程序

在小程序中，data无法直接管理，所以需要使用setData函数。考虑到开发微信小程序时setData用户体验较差，我使用了wx-updata库函数。这个库功能在我的开发过程中非常有帮助。这里特别推荐给大家。？ .height是155。如何使用setData：

// 这样会把 info 里其他属性整不见了
this.setData({ info: { height: 155 } })

// 你需要取出 info 对象，修改后整个 setData
const { info } = this.data
info.height = 155
this.setData({ info })

看起来不太复杂，但是如果data是一个大对象，你需要让它更深，不同的对象和字段元素一一更改：

data: {
    name: '蜡笔小新',
    info: {
        height: 140, color: '黄色',
        desc: [{ age: 8 }, '最喜欢大象之歌', '靓仔', { dog: '小白', color: '白色' }]
    }
}

例如某个请求需要将info.height更改为155，同时更改第0项info。 desc字段age是12，第三个元素color是灰色？

// 先取出要改变的对象，改变数字后 setData 回去
const { info } = this.data
info.height = 155
info.desc[0].age = 12
info.desc[3].color = '灰色'
this.setData({ info })

// 或者像某些文章里介绍的，这样可读性差，也不太实用
this.setData({
    'info.height': 155,
    'info.desc[0].age': 12,
    'info.desc[3].color': '灰色'
})

以上两种方法是我们日常小程序中经常使用的。与其他Web框架相比，它们非常蹩脚，有很强的半成品感。有没有这样的方法：

this.upData({
    info: {
        height: 155,
        desc: [{ age: 12 }, , , { color: '灰色' }]
    }
})

这个方法会帮助我们深度修改嵌套对象中对应的属性值，跳过我们不想改变的字段元素，只设置属性值和我们提供的对象数组。难道不会丢掉很多蹩脚的代码吗？可读性也非常好。

这就是为什么我在Web项目中使用wx-updata而不是setData

wx-updata。原理其实很简单。例如：

this.upData({
    info: {
        height: 155,
        desc: [{ age: 12 }]
    }
})

// 会被自动转化为下面这种格式，
// this.setData({
//    'info.height': 155,
//    'info.desc[0].age': 12,
// })

原来这个转换需要我们自己来做。我们必须手动完成，但现在 wx-updata 已经为我们完成了。不是很好吗？？使用setData的方式与upData相同：

// app.js 中挂载
import { updataInit } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径

App({
    onLaunch() {
        Page = updataInit(Page, { debug: true })
    }
})

// 页面代码中使用方式
this.upData({
    info: { height: 155 },
    desc: [{ age: 13 }, '帅哥'],
    family: [, , [, , , { color: '灰色' }]]
})

某些框架可能会对Page对象进行额外的更改，直接替换页方法可能不太好。 wx-updata还揭示了工具方法。用户可以直接使用处理页面代码中的工具方法：

// 页面代码中
import { objToPath } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径

Page({
    data: { a: { b: 2}, c: [3,4,5]},

    // 自己封装一下
    upData(data) {
        return this.setData(objToPath(data))
    },

    // 你的方法中或生命周期函数
    yourMethod() {
        this.upData({ a: { b: 7}, c: [8,,9]})
    }
})

当改变指定的数组元素时，数组中的空格可能会被跳过，wx-updata还提供了Empty的Symbol类型替换作为数组对象的路径方法。如果有兴趣，可以参考wx-updata文档或者参考《开发微信小程序，为什么放弃setData而使用upData》这篇介绍文章。

另外，如果你使用wx-updata，也可以使用原来的setData。尤其是有时候需要清矩阵的时候，可以灵活运用，获得更好的小程序开发体验。祝大家小程序开发愉快？