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

Posted 2023-04-14

【中文标题】为啥我的 RemoveItem 功能不起作用？ - 上下文 API - 反应

【英文标题】：Why is my RemoveItem function not working? - Context API - React为什么我的 RemoveItem 功能不起作用？ - 上下文 API - 反应

【发布时间】：2021-11-06 08:57:31

【问题描述】：

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

    )

【参考方案1】：

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

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

【讨论】：

感谢您抽出宝贵时间查看此内容，您能否详细说明您的意思？我只是尝试实施您提到的解决方案并没有解决问题。