一個你想不到的小程式陣列更新方式

anchovy發表於2022-05-24
陣列

首先這裡不得不吐槽下小程式的陣列更新，直接通過 setData 替換整個陣列只在開發者工具上有效果，放到真機上就完全失靈，這是一件很蛋疼的事情，不知道小程式官方團隊的更新機制是什麼，也沒有去細看，猜測可能與引用型別有關係。

看了網上大都是指定修改陣列物件裡的某個元素值，如這樣：

Page({
    data: {
        list: [{name: 'tom'}]
    },
    onLoad() {
        this.setData({[`list[0].name`]: 'jack'})
    }
})

PS：感覺這樣處理非常麻煩，需要一個個遍歷去處理，而且新陣列與舊陣列的長度可能還不一至，還要對比，想想就放棄了，也沒真正測試出來效果來。

因為要做的是一個簡單的頁面，只有地圖和列表，所以就另闢蹊徑通過 redirectTo 去處理了，其就是想通過重新整理頁面去實現檢視更新的，因為小程式沒有直接的重新整理頁面API，所以就想著通過 reLaunch 或 redirectTo 間接實現，不過 reLaunch 沒效果，所以就確定了 redirectTo 加上引數實現的檢視更新，說到這，其實這個和陣列更新沒有關係了，不過這確實是因為陣列更新沒效果引起的血案，只能通過其他方式來救場，相應的示例程式碼：

Page({
    data: {
        activeTab: '',
        list: []
    },
    onLoad(options) {
        if(options.tab) {
            this.setData({activeTab: options.tab})
        }
        this.getList()
    },
    changeTab(e) {
        wx.redirectTo({url: `/pages/index/index?tab=${e.currentTarget.dataset.tab}`})
    },
    getList() {
        wx.request({
            url: 'xxx',
            data: {
                tab: this.data.activeTab
            },
            success: res => {
                this.setData({list: res.data})
            }
        })
    }
})

最後雖然問題側面解決了，但這不是正規的解決方式，而且有場景限制，所以還是希望官方看看能否優化陣列的更新機制。

更多前端知識，請關注小程式，不定期有驚喜！

image.png

相關文章