为什么我的RemoveItem函数不工作?-上下文API - React

Question

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

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

如果你想在代码沙箱中复制我所说的内容，只需单击添加到购物车按钮-然后单击右上方的篮子图标进入篮子页面-然后单击减号按钮删除项目。

代码沙箱在这里

下面的代码:

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函数?

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