如何在 React 中从购物车中删除两个冲突的 ID?

Question

我一直在尝试在我的程序中正确地向购物车添加和删除项目，但到目前为止，我已经设法将项目添加到购物车中。但是，当将不同类别的项目放在一起时，它只能部分工作。

以下是项目在"服务"JSON 中的显示方式：

"id": "0",
"type": "service",
"name": "Washing",
"isFavorite": false

这就是在"时代"JSON 中找到项目的方式：

"id": "0",
"type": "time",
"day": "today",
"time": "09:40",
"isFavorite": false

我的 useState 钩子与 cartItems 以及为在购物车中添加和删除它们而创建的方法：

const [cartItems, setCartItems] = useState([])
function addToCart(newItem) { 
setCartItems(prevItems => [...prevItems, newItem])
}
function removeFromCart(itemToRemove) { 
setCartItems(prevItems => prevItems.filter(item => 
item.id !== itemToRemove.id))
}

我如何在服务和时间的不同组件中删除和添加商品到购物车：

//Services
const isSelected = allServices[props.id].isFavorite ? 
<i className="icon-selected" onClick={() => context.removeFromCart(props)}> &#9664; </i> 
: hovered && <i className="icon-hover" onClick={() => context.addToCart(props)}> &#128946; </i> 
//Times
const isSelected = (id) =>  allTimes[id].isFavorite ? 
<i className="icon-fix" onClick={() => context.removeFromCart(allTimes[id])}> &#9664; </i>
: hovered && <i className="icon-fix" onClick={() => context.addToCart(allTimes[id])}> &#128946; </i>

我尝试将我的 removeFromCart 函数更改为item.id !== itemToRemove.id && item.type === type这样 id 不是唯一的标准，但没有成功。

Answer 1

如果每个类别的 ID 都是唯一的，您可以将 id 与类别名称连接起来吗？IE：${item.id}-${item.type} !== ${itemToRemove.id}-${itemToRemove.type}

Answer 2

我认为您的函数运行良好，但问题可能出在迭代过程中，因为如果您使用特定键(例如 id (迭代所有元素，React 将无法正确显示它。