最近新开发一个功能,点击立即下单,会把售罄,库存不足的商品id和异常类型返回给我,我需要将状态在页面上展示:
需要做的就是将我上一次的商品列表和最新返回的商品列表进行对比,最新的数据是不包含售售罄
和库存不足的,我需要替换并且保留上一次的包含售罄和库存不足,用来在页面上展示标识:
模拟旧列表:
var arr1 =
[
{ id:'1',name:'zhangsan', age:'15'},
{ id:'2', name:'lisi', age:'16' },
{ id:'3', name:'ani', age:'17'},
]
模拟新列表:
var arr2 =
[
{ id:'1',name:'zhangsan', age:'100' },
{ id:'2', name:'lisi' },
]
// 值传递和引用传递
function concatFailSpecs(oldList, newList) {
let oldList1= oldList.map((item) => {
newList.forEach((item2) => {
if(item.id == item2.id) {
item = item2
}
})
return item
});
return oldList1;
}
// 或者
function concatFailSpecs(oldList, newList) {
return oldList.map(oldItem=> {
const newItem = newList.find(newItem=> newItem.id === oldItem.id);
return newItem || oldItem;
});
}
真实渲染数据:
this.setData({
productList: concatFailSpecs(this.data.productList, res.body.productList),
});
通过封装的concatFailSpecs方法,就可以把最新返回的数据替换我的老列表里的数据,并且保留售罄和库存不足的商品。因为如果有库存不足或者售罄会另外返回一个FailSpecs列表,里面是异常类型和商品id,我拿到处理过的商品列表和FailSpecs列表对比,将符合条件的异常作为属性添加到productList里面:
// failSpecs: 1已下架 2:库存不足 3:已售罄 列表
failSpecsCheck(productList,failSpecs) {
productList.forEach((item) => {
failSpecs.forEach((item2) => {
if (item.productSpecId == item2.specId) {
item.failType = item2.failType;
item.sku = item2.sku;
item.maxBuyNum = item2.maxBuyNum;
if(item.count > item2.maxBuyNum) {
item.count = item2.maxBuyNum;
}
}
})
});
this.setData({
productList,
});
},
功能完成。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。