javascript - 如何从 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 钩子(Hook)与 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 与类别名称连接起来？即:${item.id}-${item.type} !== ${itemToRemove.id}-${itemToRemove.type}