评论
微信小程序-超简单-处理Push新增数组和更新二维数组字段,Push返回对象为1

微信小程序-超简单-处理Push新增数组和更新二维数组字段,Push返回对象为1

浪漫和悲观并不冲突 我时常消极又觉得生活很美好

微信小程序-超简单-处理Push新增数组和更新二维数组字段,Push返回对象为1

时间推到国庆期间在接触小程序设计题库方面的内容遇到了一个瓶颈。该题库总3题,我在做到第二题时候突然想回到第一题,而第一题是我做过的题目我在返回时能够记住之前的答案,且我们修改的选择时可以更新数据

这就是设计到标题的内容微信小程序处理Push新增数组和更新二维数组字段

我们先设计2个数组为学习案例

 //新数据
        newData: [],
        //旧数据
        usedData: [
            [
                {value: '《小王子》'},
                {value: '《人间草木》'},
                {value: '《致D》'},
],[
                {value: '《从你的全世界而路过》'},
                {value: '《云边有个小卖铺》'},
                {value: '《天堂旅行团》'},
            ],[
                {value: '《少有人走的人》'},
                {value: '《他人的力量》'},
                {value: '《我们总是孤独成长》'},
            ]
        ]

页面上建立2个按钮点击后触发事件


<!--pages/lists/lists.wxml-->
<button bindtap="newtap">新增数据</button>
<button bindtap="usedtap">改旧数据</button>

<view>{{newData[0].name}}</view>
<view>{{usedData[0][0].value}}</view>

新增数据

原生小程序更新数组需要使用setData方式push新数据导致我们无法直接书写

//新数据--错误示例 返回结果为1
    newtap() {
        var item = {
            name: 'yinfengrui',
            age: '18'
        };
        this.setData({
            newData: this.data.newData.push(item)
        })
        console.log(this.data.newData)
    },

以上为最初想法错误示例,控制台打印结果返回为1

微信小程序-超简单-处理Push新增数组和更新二维数组字段,Push返回对象为1

正确做法是外面赋值后在执行setData

//新数据--正确做法
    newtap() {
        var item = {
            name: 'yinfengrui',
            age: '18'
        };
        //外面赋值后在执行setData
        this.data.newData.push(item);
        this.setData({
            newData: this.data.newData
        })
    },

更新旧数据

更新旧数据是一个头疼的点,因为我们是需更新二维数组下的某个字段内容,阅读文章很多却没能找到一个合适的方案

举个度娘的栗子

作为自学的新手看到度娘文章上改方法头是有点疼的,为啥在ids需要添加一个[]括号?后期将索引值改成动态之后看着头疼

 //旧数据
    usedtap() {
        let ids = 'usedData[' + 0 + '][' + 0 + '].value'
        this.setData({
            [ids]: 'yinfengru45465i'
        })
        console.log(this.data.usedData)
    }
微信小程序-超简单-处理Push新增数组和更新二维数组字段,Push返回对象为1

最终

或许是按大佬说的因为自学基础不扎实,没有系统学习过导致很多问题。在外面先赋值后再用setData渲染。后期改成动态的索引值看着也舒服好理解

 //旧数据
    usedtap() {
        this.data.usedData[0][0].value = 'yinfengru45465i';
        this.setData({
            usedData: this.data.usedData
        })
        console.log(this.data.usedData)
    }

学习结果

头发 -99

经验 +5

等级 lv-99