反应js增量计数数组中现有的object

Question

我正在创建一个简单Point of sale系统并在我的Cart reducer中。

我需要检查object是否已经在Cart Array中，然后增加数量。 如果Object不存在，则将其推入Cart Array

代码按预期工作。 但是有更好的解决方法吗？

推车减速机

export const cartReducer = (state: IState, action: Actions) => {
const { uid } = action.payload

switch (action.type) {
    case 'ADD_TO_CART': {
        const cart_item = state.cart.filter(item => item.uid === uid)

        if (cart_item.length > 0) {
            return {
                ...state,
                cart: state.cart.map(item => item.uid === uid ? { ...item, quantity: item.quantity + 1 } : item)
            }
        }

        return {
            ...state,
            cart: [...state.cart, action.payload]
        }
    }
}
}

Answer 1

这对我来说看起来很合理，但你可以通过

• 提前申报新cart而不是两次返回
• 使用some代替filter

case 'ADD_TO_CART': {
    const exists = state.cart.some(item => item.uid === uid);
    const cart = exists
        ? state.cart.map(item => item.uid === uid ? { ...item, quantity: item.quantity + 1 } : item)
        : [...state.cart, action.payload];
    return {
        ...state,
        cart
    };
}

Answer 2

您可以简单地使用findIndex ，而不是循环遍历所有项目两次（过滤一次，映射一次）。

findIndex优于filter的好处：一旦条件满足，迭代就会停止，你会得到它的索引，不像 filter 循环遍历数组中的所有元素。

如果您的数组元素较少，则您的解决方案很好，但findIndex在长 arrays 的情况下会提供更好的性能。

switch (action.type) {
    case 'ADD_TO_CART': {
        const cartItemIndex = state.cart.findIndex(item => item.uid === uid)
        const updatedCart = [...state.cart]

        if (cartItemIndex > -1) {
            updatedCart[cartItemIndex] = { ...updatedCart[cartItemIndex], quantity: item.quantity + 1 }
        }
        else {
            updatedCart.push(action.payload)
        }

        return {
            ...state,
            cart: updatedCart
        }
    }
}