微信小程序 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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
Vue.js表单控件实践
Oct 27 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
基于JavaScript实现轮播图效果
Jan 02 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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 禁止页面缓存输出
2009/01/07 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python中文字符串截取问题
2015/06/15 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
Python实现一个论文下载器的过程
2021/01/18 Python
转党组织关系介绍信
2014/01/08 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
三八妇女节活动总结
2014/05/04 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
Python如何配置环境变量详解
2021/05/18 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python