// 购物车项 const [items, setItems] = useState<selectResultData[]>([]); const addItem = async (item2: selectResultData) => { // const itemsIndex = items.findIndex((i) => i.id === item2.id); const itemsIndex = items.findIndex( (i) => i.id === item2.id && _.isEqual(i.selectExt, item2.selectExt) ); console.log({ itemsIndex }, "itemsIndexitemsIndex"); if (itemsIndex < 0) { setMoadlB(false); if (!item2.selectSum) { const selectSellPrice = item2?.customAttr.find( (item) => item.key === "sellPrice" )?.value; setItems([...items, { ...item2, num: 1, selectSum: selectSellPrice }]); upt([...items, { ...item2, num: 1, selectSum: selectSellPrice }]); } else { setItems([...items, { ...item2, num: 1 }]); upt([...items, { ...item2, num: 1 }]); } } else { const updateItems = [...items]; // 更新 index 对应的元素 updateItems[itemsIndex] = { ...updateItems[itemsIndex], num: updateItems[itemsIndex].num + 1, }; setItems(updateItems); upt(updateItems); } }; const removeItem = async (item2: selectResultData) => { // const updateCarts = [...cartItems]; const itemsIndex = items.findIndex( (i) => i.id === item2.id && _.isEqual(i.selectExt, item2.selectExt) ); if (itemsIndex >= 0) { const updateItems = [...items]; // 是否存在相同id和ext属性的商品,存在则num-1 if (updateItems[itemsIndex].num > 1) { updateItems[itemsIndex] = { ...updateItems[itemsIndex], num: updateItems[itemsIndex].num - 1, }; } else { // 数组中删除该商品 updateItems.splice(itemsIndex, 1); } setItems(updateItems); // upt(updateItems); } }; 上面是添加和减少购物车的方法,我在进行添加购物车操作时,怎么把门店id作为key,购物车数据作为value存储到一个usestate并设置usestate初始值为空数组?如果减少购物车时,怎么把对应的门店id的value中的商品减少?如果是多家门店购物车,请新增一个对象在去存储另一家店购物车的数据到同一个usestate中,并将处理好的数据存到全局变量redux中类似dispath(putShopCar(数据)),能实现吗
时间: 2024-02-14 07:08:18 浏览: 160
可以使用一个对象来存储多家门店的购物车数据,其中每个门店的数据以门店 id 作为 key,购物车数据作为 value。具体实现可以参考以下代码:
```
const [cartData, setCartData] = useState<{ [key: string]: selectResultData[] }>({});
const addItem = async (item2: selectResultData, storeId: string) => {
const itemsIndex = cartData[storeId]?.findIndex(
(i) => i.id === item2.id && _.isEqual(i.selectExt, item2.selectExt)
);
console.log({ itemsIndex }, "itemsIndexitemsIndex");
if (itemsIndex < 0) {
setMoadlB(false);
if (!item2.selectSum) {
const selectSellPrice = item2?.customAttr.find(
(item) => item.key === "sellPrice"
)?.value;
const newCartData = {
...cartData,
[storeId]: [
...(cartData[storeId] || []),
{ ...item2, num: 1, selectSum: selectSellPrice },
],
};
setCartData(newCartData);
dispatch(putShopCar(newCartData));
} else {
const newCartData = {
...cartData,
[storeId]: [...(cartData[storeId] || []), { ...item2, num: 1 }],
};
setCartData(newCartData);
dispatch(putShopCar(newCartData));
}
} else {
const updateCartData = [...cartData[storeId]];
// 更新 index 对应的元素
updateCartData[itemsIndex] = {
...updateCartData[itemsIndex],
num: updateCartData[itemsIndex].num + 1,
};
const newCartData = {
...cartData,
[storeId]: updateCartData,
};
setCartData(newCartData);
dispatch(putShopCar(newCartData));
}
};
const removeItem = async (item2: selectResultData, storeId: string) => {
const itemsIndex = cartData[storeId]?.findIndex(
(i) => i.id === item2.id && _.isEqual(i.selectExt, item2.selectExt)
);
if (itemsIndex >= 0) {
const updateCartData = [...cartData[storeId]];
// 是否存在相同id和ext属性的商品,存在则num-1
if (updateCartData[itemsIndex].num > 1) {
updateCartData[itemsIndex] = {
...updateCartData[itemsIndex],
num: updateCartData[itemsIndex].num - 1,
};
} else {
// 数组中删除该商品
updateCartData.splice(itemsIndex, 1);
}
const newCartData = {
...cartData,
[storeId]: updateCartData,
};
setCartData(newCartData);
dispatch(putShopCar(newCartData));
}
};
```
在上述代码中,我们使用了一个对象 `cartData` 来存储多家门店的购物车数据,其中每个门店的数据以门店 id 作为 key,购物车数据作为 value。在添加购物车时,我们根据传入的 `storeId` 来判断当前操作的门店是哪一家,然后将购物车数据加入到对应的门店中。在减少购物车时,同样需要根据传入的 `storeId` 来找到对应的门店数据,然后进行操作。最后,我们将处理好的数据存到全局变量 redux 中,以便其他组件进行使用。
阅读全文