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

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

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

这就是如何在“times”JSON中找到项目：

My 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>

//服务
const isSelected=allServices[props.id]。是否收藏夹？
context.removeFromCart（道具）}>&9664；
：悬停&&context.addToCart（props）}>🞲；
//时代
const isSelected=（id）=>allTimes[id]。isFavorite？
context.removeFromCart（始终[id]）>◀；
：悬停&&context.addToCart（始终[id]）>🞲；

---

我已尝试将removeFromCart函数更改为

item.id！==itemToRemove.id&&item.type===type

，因此id不是唯一的标准，但没有成功。

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

如果每个类别的ID都是唯一的，能否将ID与类别名称连接起来？IE:

${item.id}-${item.type}！==${itemToRemove.id}-${itemToRemove.type}

您可以使用库来确保id是唯一的吗？如果每个类别的id都是唯一的，您可以将id与类别名称连接起来吗？IE:

${item.id}-${item.type}

！==

${itemToRemove.id}-${itemToRemove.type}

谢谢@Chad，问题解决了@kiabbott当然！我会加上它作为答案。

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>