微信小程序 setData 對 data數(shù)據(jù)影響問題

發(fā)布時間：2020-09-05 19:49:43 來源：腳本之家閱讀：315 作者：千山冷易水寒欄目：web開發(fā)

我是純前端的，有些時候沒有后端接口，只能模擬一些數(shù)據(jù)來操作。偶然之下，發(fā)現(xiàn)了setdata 的一些機制，也有可能不對，請多指教。

先放結(jié)論：data的變量通過setdata綁在一起，是同步變化的

準備做一個一鍵還原界面的按鈕事件，如果有后端接口，只需調(diào)一下接口，就可以了。問題是沒有，于是想弄兩個一模一樣的數(shù)組A,B；A用來渲染界面，一鍵還原的時候，就把B的值賦給A，從而引起頁面重新渲染，達到重置界面的效果。

結(jié)果一點反應(yīng)也沒有。

data里有模擬的數(shù)組 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發(fā)現(xiàn) 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

我通過一個函數(shù)改變了date，加1，

可以看到 1和2同時改變，3不變；

一鍵還原第一次

可以看到，1不變，3的值賦給了2；到目前正常

再次改變date，

可以看到，2和3一起變，1不變了

一鍵還原

和上面一樣不變了

后來我改成

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

效果和上面一樣。

結(jié)論，

當data有3個變量，a和b、c

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

意思是，a和b綁一起，c和b綁一起，3個一起變，改變一個等于改變3個。個人猜測，應(yīng)該是存放變量a，b，c 的地址變成一個了。

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

a和b一起變。

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

a不和b一起變，和c一起變。

簡而言之，data的變量通過setdata綁在一起，是同步變化的，要小心。

總結(jié)

以上所述是小編給大家介紹的微信小程序 setData 對 data數(shù)據(jù)影響問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

向AI問一下細節(jié)

微信小程序 setData 對 data數(shù)據(jù)影響問題

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽