为什么我的 RemoveItem 功能不起作用？ - 上下文 API - 反应

Question

我正在构建一个购物篮电子商务应用程序，我的添加到购物车功能运行良好，但是当我使用我的删除项目功能时它不起作用，实际上它只是再次将相同的项目添加到购物车但随后显示总数作为 NaN。

我只是使用 .filter 来返回一个新数组，其中没有我想通过使用它的 id 删除的项目，所以不确定这是怎么发生的。

如果您想在代码沙箱中复制我所说的内容，只需点击添加到购物车按钮 - 然后点击右上角的购物篮图标进入购物篮页面 - 然后点击减号按钮删除该商品。

代码沙箱here

代码如下：

CartReducer.js

import {ADD_TO_CART, REMOVE_ITEM} from '../Types'

export const CartReducer = (state, action) => {
    switch (action.type) {
        case ADD_TO_CART: {
            return {
                ...state,
                cartItems: [...state.cartItems, action.payload],
            }
        }
        case REMOVE_ITEM: {
            return {
                ...state,
                cartItems: state.cartItems.filter((item) => item.id !== action.payload.id),
            }
        }
        default: 
            return state
    }
}

CartState.js

import { useReducer } from 'react'
import { CartContext } from './CartContext'
import {CartReducer} from './CartReducer'
import { SHOW_HIDE_CART, ADD_TO_CART, REMOVE_ITEM } from '../Types'
import {products} from '../../pages/ProductDetailsPage'


export const CartState = ({children}) => {

    const initialState ={
        // showCart: false,
        products: products,
        cartItems: [],

    };

    const [state, dispatch] = useReducer(CartReducer, initialState);

    const addToCart = (item) => {
        dispatch({type: ADD_TO_CART, payload: item})
    };

 
    const removeItem = (id) => {
        dispatch({ type: REMOVE_ITEM, payload: id });
    };


    return (
        <CartContext.Provider 
            value={{
                products: state.products,
                cartItems: state.cartItems,  
                addToCart,
                removeItem,
            }}>
            {children}
        </CartContext.Provider>
    )
};

BasketItem.js

import React, { useContext } from 'react'
import image from '../assets/image.png'
// import { QuantityButtonDiv } from '../components/QuantityButtonDiv'
import plusButtonImage from '../assets/vector+.png'
import subtractButtonImage from '../assets/vector.png'
import { CartContext } from '../context/cart/CartContext'


export const BasketItem = ({item}) => {

    const { cartItems, removeItem } = useContext(CartContext);

    return (
        <div className="basket-item">
            <div className="title-div">
                <span>
                    {item.title}
                </span>
            </div>
            <div className="image-div">
                <img style={{height: "100%", width: "100%"}} src={image}/>
            </div>
            <div className="price-div">
                <span>
                    £{item.price}
                </span>
            </div>
            <div className="basket-quantity-div">
                <button onClick={() => removeItem(item.id)} className="subtract-btn">
                    <img src={subtractButtonImage}/>
                </button>
                <span className="quantity-value">
                    {cartItems.length}
                </span>
                <button className="add-btn">
                    <img src={plusButtonImage}/>
                </button>
            </div>  
            <div className="total-div">
                £{cartItems.reduce((amount, item) => item.price + amount, 0)}
            </div>
        </div>

    )
}

Answer 1

您是否仔细检查了 removeItem 功能？

在 dispatch 中你发送 { payload: id } 然后 reducer 从 payload.id 中获取值。如果你想以这种方式管理 reducer，你必须在有效负载中发送一个对象 { id: id } 或简写的 { id }