微信小程序 setData 对 data数据影响问题


Posted in Javascript onApril 18, 2019

我是纯前端的,有些时候没有后端接口,只能模拟一些数据来操作。偶然之下,发现了setdata 的一些机制,也有可能不对,请多指教。

先放结论:data的变量通过setdata绑在一起,是同步变化的

准备做一个一键还原界面的按钮事件,如果有后端接口,只需调一下接口,就可以了。问题是没有,于是想弄两个一模一样的数组A,B;A用来渲染界面,一键还原的时候,就把B的值赋给A,从而引起页面重新渲染,达到重置界面的效果。

结果一点反应也没有。

data里有模拟的数组  itemleft  itemright,二选一,

定义代码是这么写的

this.setData({
uniqueitem: (id == 'unfinish') ? this.data.itemleft[index] : this.data.itemright[index],

cloneitem: (id == 'unfinish') ? this.data.itemleft[index] : this.data.itemright[index],

baninput: (id == 'unfinish')?false:true
})

这是一键还原的代码

this.setData({
uniqueitem:this.data.cloneitem
})

后来通过console.log发现   uniqueitem、cloneitem和this.data.itemleft[index] 的值是一模一样的,意思是,当我改变uniqueitem的时候,其他两个都会跟着变。

然后,我把cloneitem的值通过缓存还获取,代码变成了这样

this.setData({
uniqueitem: (id == 'unfinish') ? this.data.itemleft[index] : this.data.itemright[index],

baninput: (id == 'unfinish')?false:true
})
var that=this
wx.getStorage({

key: 'item',

success: function(res) {


console.log(res)


that.setData({



cloneitem:res.data


})

},
})
this.setData({

uniqueitem:this.data.cloneitem
})

改成这样之后,一键还原第一次正常,后面再点全不正常

这是测试的console顺序

console.log(this.data.itemleft[0])
console.log(this.data.uniqueitem)
console.log(this.data.cloneitem)

事先说明,改变date,改的是2的date

我通过一个函数改变了date,加1,

可以看到 1和2同时改变,3不变;

一键还原第一次

可以看到,1不变,3的值赋给了2;到目前正常

再次改变date,

可以看到,2和3一起变,1不变了

一键还原

和上面一样不变了

后来我改成

var aaa = this.data.cloneitem;
this.setData({
uniqueitem:aaa
})

效果和上面一样。

结论,

当data有3个变量,a和b、c

this.setData({
a:this.data.b

c:this.data.b
})

意思是,a和b绑一起,c和b绑一起,3个一起变,改变一个等于改变3个。个人猜测,应该是存放变量a,b,c 的地址变成一个了。

this.setData({
a:this.data.b
})

a和b一起变。

this.setData({
a:this.data.c
})

a不和b一起变,和c一起变。

简而言之,data的变量通过setdata绑在一起,是同步变化的,要小心。

总结

以上所述是小编给大家介绍的微信小程序 setData 对 data数据影响问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
jquery获取radio值实例
Oct 16 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
node实现基于token的身份验证
Apr 09 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 #Javascript
vue.js高德地图实现热点图代码实例
Apr 18 #Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 #Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 #Javascript
详解Vue中的scoped及穿透方法
Apr 18 #Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 #Javascript
Vue 进阶之路(三)
Apr 18 #Javascript
You might like
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Python如何实现线程间通信
2020/07/30 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
python 实现控制鼠标键盘
2020/11/27 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
小学科学教学反思
2014/01/26 职场文书
小组合作学习反思
2014/02/18 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书