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

我是纯前端的，有些时候没有后端接口，只能模拟一些数据来操作。偶然之下，发现了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数据影响问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • 微信小程序使用setData修改数组中单个对象的方法分析

    本文实例讲述了微信小程序使用setData修改数组中单个对象的方法.分享给大家供大家参考,具体如下: 微信小程序已经出来挺久的时间了,之前只是在文档上粗略的看了一下,最近稍得空闲,便利用微信小程序平台写一个练手的项目,顺便学习一下小程序开发,感觉大体跟前端开发基本类似,但是因为是在微信的平台上运行,具体还是要根据小程序的规则来编写代码的,其中还是有部分的内容跟前端中常见的有所不同,于是接下来的博客里,也会顺手记录微信小程序开发过程中的一些坑,帮助后来的小程序开发者少踩一些坑,当然我踩的坑大部分都

  • 微信小程序 setData的使用方法详解

    微信小程序 setData的使用方法详解 最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的: Page({ data: { array: [{text: 'init data'}], }, changeItemInArray: function() { this.setData({ 'array[0].text':'changed data' }) } }) 使用了 'array[0].text' : '

  • 微信小程序 setData使用方法及常用错误解决办法

    微信小程序 setData使用方法及常用错误解决办法 最近在弄微信小程序,类似于共享单车用来练练手,基本原理就是小程序发送经纬度给服务器,服务器从数据库中检索经纬度附近的单车传给小程序. 就在这里..没错就是这里,传回来的值是以jsonarray格式传过来的. 我需要将jsonarray进行解析获取经纬度,ID等车辆信息,然后赋值给小程序地图上的mark,一般我的思路时直接用个for循环给每个mark进行赋值然后再Setdata一下就ok, 结果没想到小程序setData()设置数组对象的某个元

  • 微信小程序中this.data与this.setData的区别详解

    微信小程序中this.data与this.setData的区别详解

    一.摘要 小程序中我们会经常使用到this.data与this.setData.其中this.data是用来获取页面data对象的,而this.setData是用来更新界面的.那么他们之间的区别与联系你真的搞懂了吗? Page.prototype.setData() setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值. 注意: 直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致. 单次设置的数据不能超过1024kB,请尽量避免一次

  • 微信小程序报错：this.setData is not a function的解决办法

    微信小程序 报错:this.setData is not a function 在page中定义的代码如下,代码会报错:this.setData is not a function <strong> pasteEncryptedText:function()</strong>{ let decryptedPass = this.data.decryptedPassword; if (decryptedPass == '' ){ wx.showToast({ title: '请先输入

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

    我是纯前端的,有些时候没有后端接口,只能模拟一些数据来操作.偶然之下,发现了setdata 的一些机制,也有可能不对,请多指教. 先放结论:data的变量通过setdata绑在一起,是同步变化的 准备做一个一键还原界面的按钮事件,如果有后端接口,只需调一下接口,就可以了.问题是没有,于是想弄两个一模一样的数组A,B:A用来渲染界面,一键还原的时候,就把B的值赋给A,从而引起页面重新渲染,达到重置界面的效果. 结果一点反应也没有. data里有模拟的数组  itemleft  itemright,

  • 微信小程序Page中data数据操作和函数调用方法

    Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. //index.js Page({ data: { text: "This is page data.", sliderOffset: 0, sliderLeft: 0, state:{ genre:[], genre_index: 0, model:[], model_index: 0, terminalStatus:'', } }, onLoad: functio

  • 详解微信小程序Page中data数据操作和函数调用

    微信小程序Page中data数据获取和设置 一.Page中data数据的获取和设置:        1.设置data数据 this.setData(object) setData() 参数格式:接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value.其中 key 可以非常灵活,以数据 路径的形式给出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义. this.setData({ ; en

  • 微信小程序多列表渲染数据开关互不影响的实现

    最近在学习小程序,正好发现一个问题,微信小程序多列表渲染数据开关怎么互不影响,记录一下,分享给大家 <!--pages/list/list.wxml--> <wxs src="../../utils/filter.wxs" module="filter" /> <view class="list"> <view wx:for="{{list}}" wx:key="{{inde

  • 微信小程序 跳转传递数据的实例

    微信小程序 跳转传递数据的实例

    微信小程序 跳转传递数据的实例 点击view 跳转页面 <view class="album_image" data-album-obj="{{item}}" bindtap="imageclick"> <image style="width:98%;" src="{{item.data[0].url}}"></image> </view> 声明变量  dat

  • 微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】

    微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】

    本文实例讲述了微信小程序使用slider设置数据值及switch开关组件功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <view>微信小程序组件:滑动选择器slider</view> <slider bindchange="sliderBindchange" min="{{min}}" max="{{max}}" show-value/> <view>

  • 微信小程序云开发实现数据添加、查询和分页

    微信小程序云开发实现数据添加、查询和分页

    本文实例为大家分享了微信小程序云开发实现数据添加.查询和分页,供大家参考,具体内容如下 实现的效果 实现要点 WXML 不同类别数据的显示 通过 if-elif-else 实现,在wxml文件中通过 <block></block>渲染,因为它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性.也就是说可以通过属性来控制页面是否要渲染这部分的内容,可以减少页面渲染时间. 云开发数据的获取 先开通云开发功能 ,参考官方文档,然后在创建项目的时候勾选上 使用云开发模板(看个人吧,

  • 微信小程序实现循环嵌套数据选择

    微信小程序实现循环嵌套数据选择

    本文实例为大家分享了微信小程序实现循环嵌套数据选择的具体代码,供大家参考,具体内容如下 一.效果展示 二.代码实现 在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的情况,需要利用wx:for嵌套实现数据的展示.这时,外层循环正常循环,内层循环需要利用wx:for-item将item重新命名. <scroll-view scroll-y class="scrollTime">     <view          class="dateItem

  • 微信小程序 <swiper-item>标签传入数据

    微信小程序 <swiper-item>标签传入数据

    微信小程序 <swiper-item>标签传入数据 在<swiper-item>中用for循环传入多个成对不同数据时的实现方法. 看下效果图: 遍历实现方法:wxss省略: wxml中代码: <!--导航部分轮播图--> <swiper class="navban" indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration=&q

  • 微信小程序 出现47001 data format error原因解决办法

    微信小程序 出现47001 data format error原因解决办法

    微信小程序 出现47001 data format error原因解决办法 看下错误: 主要原因是请求的数据不是json格式引起的 分享下我用的代码和函数: 发送模板消息 public function sendmessage(){ $data=$_POST=json_decode(file_get_contents('php://input'), TRUE); $access_token=$this->getAccessToken(); $request_url='https://api.we

随机推荐