Question

我正在使用 redux 来跟踪购物车项目，以下是 reducer：

const cartItemsReducer = (state = initialState, action) => {
 

       switch (action.type) {
            case 'ADD_TO_CART':
                return [...state, action.payload]
            case 'REMOVE_FROM_CART':
                return state.items.filter(i => i.Id !== action.payload.Id);
    
        }
        return state
    }

和动作创建者如下：

 const removeItemFromCart = item =>
        dispatch({
            type: 'REMOVE_FROM_CART',
            payload: item
        })

在购物车屏幕中，我正在渲染一个数组，它们的结构如下：

 [[{"Id": 875, "name": "Burger", "photo": "https://apicms.thestar.com.my/uploads/images/2020/02/28/579752.jpg", "total": "25.00"}],[{"Id": 865, "name": "Burger", "photo": "https://apicms.thestar.com.my/uploads/images/2020/02/28/579752.jpg", "total": "20.00"}],[{"Id": 888, "name": "Burger", "photo": "https://apicms.thestar.com.my/uploads/images/2020/02/28/579752.jpg", "total": "22.00"}]]

因此，当我为特定商品按下一个删除按钮时，它会删除购物车中的所有商品，但我只想删除该商品

Answer 1

在您的数组中，每个项目都有数组括号，要么删除那些额外的数组括号，要么使用每个项目的第 0 个索引进行过滤，如下面的代码。

state.items.filter(i => i[0].Id !== action.payload.Id)

要将商品添加到购物车，请尝试在 states.items 中推送有效负载

Answer 2

您需要为您的数组提供一个键，例如 cart，因为您可以获得更多数据，例如价格，并且您需要为其提供一个键。

       const cartItemsReducer = (state = initialState, action) => {
 
       switch (action.type) {
            case 'ADD_TO_CART':
                return {...state, cart: [...state.cart, action.payload]}
            case 'REMOVE_FROM_CART':
                return {...state, cart: state.cart.filter(i => i.Id !== action.payload.Id)};
    
        }
        return state
        }

Answer 3

您对自己的状态非常困惑。

您在购物车屏幕中获得的数据是一个数组数组，其中每个都有一个项目。您的 addToCart 操作创建者不正确，或者您调用它的方式不正确。
case 'ADD_TO_CART' 将状态视为一组项目。
case 'REMOVE_FROM_CART' 将状态视为具有属性 items 的对象，该属性是项目对象的数组。您只需返回一个数组，而不是返回带有更新的 items 属性的新状态。所以这个案例真的很糟糕，因为它与自身不兼容。

如果您希望状态只是一组项目，那么您的 case 'REMOVE_FROM_CART' 应该 filter 整个 state。

const cartItemsReducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_TO_CART":
      return [...state, action.payload];
    case "REMOVE_FROM_CART":
      return state.filter((i) => i.Id !== action.payload.Id);
    default:
      return state;
  }
};

Redux 使用官方 Redux Toolkit 更容易使用，因为您无需担心改变状态。 createSlice 函数特别棒，因为它会自动为 reducer 中的每种情况创建动作创建者。查看 the tutorials 和文档以了解此代码的工作原理。

const cartSlice = createSlice({
    name: "cart",
    initialState: [],
    reducers: {
        addItemToCart: (state, action) => {
            state.push(action.payload);
        },
        removeItemFromCart: (state, action) => {
            return state.filter((i) => i.Id !== action.payload.Id);
        }
    }
})

// action creators
export const {addItemToCart, removeItemFromCart} = cartSlice.actions;
// reducer
export default cartSlice.reducer;

为什么从 redux 中删除项目会删除商店中的所有项目

3 个答案: