React JS中判断商品是否加入购物车以禁用按钮的代码疑问

你的代码不正确，问题主要出在两个方面：

1. disabled属性逻辑错误 #

你在disabled中使用map()方法是错误的：

• map()会遍历购物车数组，返回一个布尔值数组（比如[true, false]），但React的disabled属性需要单个布尔值（true/false）。数组在布尔判断中会被视为true，导致按钮始终处于禁用状态，完全不符合"商品在购物车才禁用"的预期。
• 正确的做法是使用some()方法，它会检查数组中是否存在满足条件的元素，只要有一个符合就返回true，正好匹配需求：

  disabled={cart?.cartItems?.some(cartItem => cartItem.productId === product.productId)}
  

2. console.log的语法错误 #

你写的打印代码末尾多了一个额外的}，导致语法错误，所以没有输出：

• 错误代码：

  console.log(cart?.cartItems?.map((cartItem) => cartItem.productId === product.productId)})
  

• 修正后代码：

  console.log(cart?.cartItems?.map((cartItem) => cartItem.productId === product.productId))
  

当product.productId为2时，控制台会打印[true, false]（对应购物车中ID为2和23的商品匹配结果）。

修正后的完整按钮代码 #

<Button 
  onClick={() => addToCart(product.productId)} 
  className='btn-block' 
  type='button' 
  disabled={cart?.cartItems?.some(cartItem => cartItem.productId === product.productId)}
>
  加入购物车
</Button>

内容的提问来源于stack exchange，提问作者Sachin