TypeError: cartItems.Find不是一个函数

Question

大家好，当我试图删除一个项目时，我无法解决这个问题，但我得到了这个问题TypeError: cartItems。find不是一个函数

Cart.utils.js

export const removeItemFromCart = (cartItems, cartItemToRemove) => {
const existingCartItem = cartItems.find(
(cartItem) => cartItem.id === cartItemToRemove.id
);
if (existingCartItem.quantity === 1) {
return cartItems.find((cartItem) => cartItem.id !== cartItemToRemove.id);
}
return cartItems.map((cartItem) =>
cartItem.id === cartItemToRemove.id
? { ...cartItem, quantity: cartItem.quantity - 1 }
: cartItem
);
}; 

cart.reducer.js

case CartActionType.REMOVE_ITEM:
return {
...state,
cartItems: removeItemFromCart(state.cartItems, action.payload),
};

checkoutItem.js

........
<span className="left-arrow" onClick={() => removeItem(item)}>
&#10096;
</span>
.......
);
};
const mapDispatchToProps = (dispatch) => ({
removeItem: (item) => dispatch(removeItemFromCart(item)),
});
export default connect(null, mapDispatchToProps)(CheckoutItem);

Answer 1

@buzzato对问题的根源和解决方案的看法是正确的。

错误cartItems.find is not a function意味着在某一点上cartItems不是array。当您分派一个动作来移除数量为1的物品时，您将遇到以下条件:

if (existingCartItem.quantity === 1) {
return cartItems.find((cartItem) => cartItem.id !== cartItemToRemove.id);
}

.find()实际上返回匹配条件的第一个值，而不是一个匹配数组。所以在你达到那个条件之后，你的state.cartItems变成了一个单一的对象，而不是一个数组。下次尝试删除任何项时，您将得到错误cartItems.find is not a function，因为您试图在对象上调用.find()。

您希望使用.filter()而不是.find()，因为filter()返回符合您条件的每个元素的数组。