问题描述
我正在构建一个电子商务应用程序,并使用以下代码实现添加到购物车的功能。 棘手的部分是当我尝试将已添加不同计数的商品添加到购物车时。
所以在下面的代码中,我不是 能够理解“if(existItem) {...}”部分。这个块应该处理上面提到的 案例。
import {
CART_ADD_ITEM,} from '../constants/cartConstants'
export const cartReducer = (state = {
cartItems: []
},action) => {
switch (action.type) {
case CART_ADD_ITEM:
const item = action.payload
const existItem = state.cartItems.map(x => x.product === item.product)
if (existItem) {
return {
...state,cartItems: state.cartItems.map(x => x.product === existItem.product ? item : x)
}
} else {
return {
...state,cartItems: [...state.cartItems,item]
}
}
default:
return state;
}
}
解决方法
这不是一个好的测试。即使为空也是如此
const cartItems = []
const existItem = cartItems.map(x => x.product === item.product)
if (existItem) console.log("Truthy")
相反:
const cartItems = []
const existItem = cartItems.map(x => x.product === item.product)
if (existItem.length>0) console.log("Items")
else console.log("Empty")
或者更快,因为如果找到它会立即返回:
const cartItems = [{product:"fish"}]
const item = { product:"fish" }
const existItem = cartItems.find(x => x.product === item.product)
if (existItem) console.log("Item found")
else console.log("Empty")