如果数组中已经存在项目，则React挂钩禁用按钮

Question

我有一个Cart组件，用于将产品保存在数组中。

我还有多个不同id的按钮在添加产品时，根据每个id独立禁用到阵列。

一旦我从数组中删除该项目，我想将按钮转回再次能够。

我尝试了几个解决方案，但它们会或禁用我的所有按钮或一旦我可以禁用添加到购物车，我就无法再次打开按钮删除时。拜托了，伙计们，我没什么主意了！

// array to save elements in the cart
const [cart, setCart] = useState([])
return (
<>
// array with all buttons
{list.map((item) => {
// function to add elements to the cart
const addToCart = () => {
const palestra = {
horario_inicio: item.horario_inicio,
horario_fim: item.horario_fim,
id_programacao: item.programacao,
nome_da_palestra: item.nome_da_palestra,
palestrante: item.palestrante,
imagem: item.imagem_palestra.url,
id: item.id
}
setCart(curr => [...curr, palestra])
}
// function to delete items fro cart
const handleRemoveItem = (itemId: string) => {
setCart(cart.filter(({ id }) => id !== itemId));
}
return (
<Box m="2" h="30%" pt={2} pb={2} border="1px solid #1C1C1C" backgroundSize="cover" borderRadius="20px" backgroundPosition="center" backgroundImage={`url(${(item.imagem_palestra?.url)})`} backgroundColor="white" align="center">
<Center ml="5" mt="2">
<Spacer />
<>
// I want to disable this button if his id exists in the array of
// cart and anable in case I case i delete this item;
<IconButton
variant="ghost"
mr="3"
colorScheme="gray"
borderRadius='md'
aria-label="Save event"
icon={<Icon as={BsBookmark} />}
onClick={addToCart}
/>
<IconButton
variant="ghost"
mr="3"
colorScheme="gray"
borderRadius='md'
aria-label="Save event"
icon={<Icon as={BsFillBookmarkFill} />}
onClick={() => handleRemoveItem(item.id)}
/>
</>
</Center>
</Box>
)
})}
</>

我再次尝试禁用只有按钮开关id与的id匹配购物车阵列中的产品。

提前感谢各位：(

Answer 1

使用Array.prototype.some怎么样？

<IconButton
...
disabled={cart.some(cartItem => cartItem.id === item.id)}
/>