减少对.splice()的不必要影响

Question

大家好👋

今天我试图用redux制作一个购物车，我正在为remove这个产品做一个按钮。

如果我的redux商店里有两个或更多的产品，我想删除第一个，所有的购物车都会被删除。

如果我在所有情况下删除最后一个产品，该产品将被删除。

我希望将产品完全从购物车(redux商店(中删除

这是我的cartReducer：

export function CartReducer(state = initialCart, action){
switch (action.type){
case 'ADD_PRODUCT_TO_CART_ACTION':
const products = [...state[state.length -1].products]
products.push({...action.payload.data})
return [...state,  {products}];
case 'UPDATE_QUANTITY_FROM_CART_ACTION':
let cart = [...state]
for (let i = 0; i < cart[cart.length -1].products.length; i++){
if (cart[cart.length -1].products[i].attributes.id === action.payload.attributeID
&& cart[cart.length -1].products[i].productID === action.payload.productID){
cart[cart.length -1].products[i].attributes.quantity++
}
}
return [...state, ...cart];
case 'REMOVE_QUANTITY_FROM_CART_ACTION':
let Cart = [...state]
for (let i = 0; i < Cart[Cart.length -1].products.length; i++) {
if (Cart[Cart.length -1].products[i].attributes.id === action.payload.attributeID
&& Cart[Cart.length -1].products[i].productID === action.payload.productID){
const currentQuantity = Cart[Cart.length -1].products[i].attributes.quantity - 1
if (currentQuantity === 0){
Cart[Cart.length -1].products.splice(i, 1)
} else {
Cart[Cart.length -1].products[i].attributes.quantity--
}
}
}
return [...state, ...Cart];
case 'TRASH_PRODUCT_FROM_CART_ACTION':
let basket = [...state]
for (let i = 0; i < basket[basket.length -1].products.length; i++){
if (basket[basket.length -1].products[i].productID === action.payload.productID) {
basket[basket.length -1].products.splice(i)
return [...state, ...basket]
}
}
return [...state, ...basket];
default:
return state;
}
}

我的初始购物车：

const initialCart = [
{
products: [],
totalPrice: 0
},
]

使用此ADD_PRODUCT_TO_CART_ACTION*3在我的redux存储中的结果：

{
"products": [
{
"productID": 14,
"attributes": {
"id": 17,
"price": 24.9,
"quantity": 1
}
},
{
"productID": 11,
"attributes": {
"id": 13,
"price": 30.9,
"quantity": 1
}
},
{
"productID": 10,
"attributes": {
"id": 15,
"price": 45.9,
"quantity": 1
}
}
]
}

如果我删除带有TRASH_PRODUCT_FROM_CART_ACTION*1的最新产品：

{
"products": [
{
"productID": 14,
"attributes": {
"id": 17,
"price": 24.9,
"quantity": 1
}
},
{
"productID": 11,
"attributes": {
"id": 13,
"price": 30.9,
"quantity": 1
}
}
]
}

您可以在此处看到已删除的最新产品：

{
"productID": 10,
"attributes": {
"id": 15,
"price": 45.9,
"quantity": 1
}
}

1. 但如果我通过示例删除第一个元素，所有内容都将被删除
2. 或者，如果我删除第二个元素，对象数组中右侧的所有内容都将被删除

你可以在下面看到意想不到的效果😅:

first case:

"products": []

second case:

"products": [
{
"productID": 14,
"attributes": {
"id": 17,
"price": 24.9,
"quantity": 1
}
}
]

我尝试过findIndex，我自己的带循环的findIndex，或者其他indexOf，它们都有同样的问题。

REMOVE_QUANTITY_FROM_CART_ACTION也有同样的问题，如果数量为0，产品会被移除，是的，但他们会移除另一个产品。

对不起，我的英语很差。

Answer 1

当您进行拼接时，您正在原地更改数组。

来自拼接的MDN文档-

If deleteCount is omitted, or if its value is equal to or larger than array.length - start 
(that is, if it is equal to or greater than the number of elements left in the array, 
starting at start), then all the elements from start to the end of the array will be deleted.

因此，当您在TRASH_PRODUCT_FROM_CART_ACTION中执行basket[basket.length -1].products.splice(i)时，基本上是从i开始删除数组中的所有元素。你应该在那里做basket[basket.length -1].products.splice(i,1)。

您可以在浏览器控制台中运行以下代码来了解发生了什么：

a = [1,2]
a.splice(0,1)
b = [3,4]
console.log(`a - ${a}`) // a - 2
c = [...a, ...b]
console.log(`c - ${c}`) // c - 2,3,4
d = c.splice(1)
console.log(`d - ${d}`) // d - 3,4
console.log(`c - ${c}`) // c - 2

我不认为将数量减少到0应该删除代码中的多个元素。在那里，您正确地使用了splice(i,1)。