Javascript 尝试从包含对象的数组中删除元素

我想写一个reducers函数来删除数组中的一个元素。该数组如下所示：

Array [
  Object {
    "category": "First Course",
    "id": 0,
    "name": "Feta im Backofen gratiniert",
    "price": 9.8,
  },
  Object {
    "category": "First Course",
    "id": 1,
    "name": "Feta gebacken in der Kruste",
    "price": 9.8,
  },
  Object {
    "category": "First Course",
    "id": 2,
    "name": "Frischer Oktapus",
    "price": 9.8,
  }]

这是我的课程：

const initialState = {
    restaurantId:0,
    cartItems:[],
    tableNumber:0,
}

const reducers = (state = initialState, action) => {
    switch (action.type) {
        case 'UPDATE_ID':
            return {
                ...state,
                restaurantId: action.payload
            };
        case 'ADD_ITEM_TO_CART':
            return {
                ...state,
                cartItems:[...Object.assign([],{...state.cartItems}),action.payload.item]
            };
        case 'UPDATE_TABLE_NUMBER':
            return{
                tableNumber: action.payload
            };
        case 'REMOVE_ITEM_FROM_CART':
            console.log(action.payload,state.cartItems);
            return{
                ...state,
                cartItems: state.cartItems.splice(action.payload,1)

            }
    }
    return state
}

export default reducers;

当我调用“从购物车中删除商品”案例时，会发生不同的事件。有时会删除多个数组元素，有时会删除正确的数组元素。我不知道这里有什么问题。我还记录了action.payload，它给出了我要删除的数组元素的索引。它总是正确的有效载荷

编辑：这是调用操作的组件：

 import React from "react";
    import { StatusBar } from "expo-status-bar";
    import { NavigationActions } from "react-navigation";
    import { ImageBackground, StyleSheet, View, Text, TextInput, TouchableOpacity } from "react-native";
    import ShoppingBag from "../components/ShoppingBag";
    import {connect} from 'react-redux';
    
    class ShoppingBagScreen extends React.Component {
    
        returnOptionsShoppingBag=()=>{
            if(this.props.cartItems.length===0 ||typeof this.props.cartItems.length===undefined) {
                    return(
                        <View>
                            <Text style={{fontSize:20}}>Ihr Warenkorb ist leer</Text>
                        </View>
                    )
                }else{
                return(
                    <View>
                <ShoppingBag shoppingBag={this.props.cartItems} onPress={this.props.deleteCartItem}/>
                <Text/>
                        {this.viewOrderButton()}
                    </View>
    
                )}
        };
    
        viewOrderButton(){
            if(this.props.tableNumber>0){
            return(
            <View>
            <TouchableOpacity >
                <Text style={{fontSize:20, color:'red'}}>Kostenpflichtig bestellen</Text>
            </TouchableOpacity>
            </View>
            )}else{
            return(
                <View>
                    <TouchableOpacity onPress={this.orderAlert}>
                    <Text style={{color:'red',opacity:0.3,fontSize:20}}>Kostenpflichtig bestellen</Text>
                    </TouchableOpacity>
                </View>
                )}
            };
    
        orderAlert(){
            return(
                alert('Bitte wählen Sie eine Tischnummer')
            )
        }
    
        render() {
            return (
                <View style={styles.Background}>
                    <Text style={{fontSize:20}}>Ihre Tischnummer lautet: {this.props.tableNumber}</Text>
                    <Text/>
                    {this.returnOptionsShoppingBag()}
                </View>
            )
        }
    
    
    }
    
    
    function mapDispatchToProps(dispatch){
    
        return {
            deleteCartItem: (index) => dispatch({type: 'REMOVE_ITEM_FROM_CART', payload: index})
        }}
    
    function mapStateToProps(state){
        return{
            cartItems: state.cartItems,
            tableNumber: state.tableNumber
            }
        }
    
    
    export default connect(mapStateToProps,mapDispatchToProps)(ShoppingBagScreen);
 

从“React”导入React；
从“世博会状态栏”导入{StatusBar}；
从“反应导航”导入{NavigationActions}；
从“react native”导入{ImageBackground，StyleSheet，View，Text，TextInput，TouchableOpacity}；
从“./组件/购物袋”导入购物袋；
从'react redux'导入{connect}；
类ShoppingBagScreen扩展了React.Component{
返回选项购物袋=（）=>{
if（this.props.cartItems.length==0 | | typeof this.props.cartItems.length==undefined）{
返回(
《瓦伦科布国际卫生条例》
)
}否则{
返回(
{this.viewOrderButton（）}
)}
};
viewOrderButton（）{
如果（此.props.tableNumber>0）{
返回(
科斯滕普利希蒂格·贝斯特伦
)}否则{
返回(
科斯滕普利希蒂格·贝斯特伦
)}
};
orderAlert（）{
返回(
警报（‘你在吃什么？’
)
}
render（）{
返回(
Ihre Tischnummer lautet:{this.props.tableNumber}
{this.returnoptions shoppingbag（）}
)
}
}
功能图DispatchToprops（调度）{
返回{
deleteCartItem：（index）=>dispatch（{type:'REMOVE_ITEM_FROM_CART'，payload:index}）
}}
函数MapStateTops（状态）{
返回{
cartItems:state.cartItems，
tableNumber:state.tableNumber
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（ShoppingBagScreen）；

这是ShoppingBag组件：

import React from 'react';
import {View,Text,TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class ShoppingBag extends React.Component{

    renderShoppingBag = (shoppingBag)=>{
        return shoppingBag.map((item,index)=>{
            return(
                <View key={index} style={{flexDirection:'row'}}>
                    <Text style={{fontSize:20}}> {item.name} {item.price}0€     </Text>
                    <TouchableOpacity onPress={()=>this.props.onPress(index)}>
                    <Icon name='trash' size={20}/>
                    </TouchableOpacity>
                </View>
            )
        })
    }

    render() {
        return(
            <View>
            {this.renderShoppingBag(this.props.shoppingBag)}
            </View>
        )
    }
}

从“React”导入React；
从“react native”导入{View，Text，TouchableOpacity}；
从“反应本机矢量图标/FontAwesome”导入图标；
导出默认类ShoppingBag扩展React.Component{
renderShoppingBag=（shoppingBag）=>{
返回购物袋。地图（（项目，索引）=>{
返回(
{item.name}{item.price}0欧元
this.props.onPress（index）}>
)
})
}
render（）{
返回(
{this.renderShoppingBag（this.props.shoppingBag）}
)
}
}

提前谢谢

有效负载应该是项目的索引，因为splice作用于索引，而不是要删除的项目数

---

首先，我建议从return语句中提取数组操作

事实上，我强烈建议在每种情况下都将状态对象和数组的副本设置为第一优先级

case 'REMOVE_ITEM_FROM_CART':
  let cartAfterRemove = [...state.cartItems];
  cartAfterRemove.splice(action.payload, 1);
  //to confirm successful splice;
  console.log(cartAfterRemove);
  let newState = {...state, cartItems: cartAfterRemove};
  return newState;
}

如果你不小心嵌套项和0变异，redux会变得非常时髦。您还可以发送对象的id而不是索引，但这将需要更多的重构

---

但有效载荷是物品的索引。@VincBue:你在问题中不是这么说的。请更新失败案例的相关状态和操作。@VincBue您说的action.payload给出了数组元素的数量？这就是为什么我认为有效载荷应该是该项目的索引，该项目将被删除好吧，对不起，伙计们。我已经更新了问题并插入了更多信息。@NooruddinLakhani:你知道怎么回事吗？如果没有更多细节，我想我们无法帮助回答这个问题。但是这一行看起来很奇怪（在ADD_ITEM中）：

cartimes:[…Object.assign（[]，{…state.cartimes}），action.payload.ITEM]

。我不知道您的模型，但这是否也能正常工作？：

cart:[…state.cartimes，action.payload.item]

？虽然在要求提供更多信息时添加更多上下文是值得称赞的，但恐怕您添加了错误的上下文。减速器的功能很容易测试。问题是我们没有数据可供测试。当此操作失败时，处于

状态

和

操作

的是什么？这就是我们真正需要知道的。非常感谢你的回答！！！很好用！我想我需要更深入地了解redux，所以也谢谢你的链接。