React报错：渲染ShoppingCart时无法更新App组件，求定位

核心报错原因及修复 #

报错的直接原因是ShoppingCart组件渲染时直接触发了App组件的状态更新，具体问题出在删除按钮的onClick绑定上：

原代码（错误写法）：

<button className='btn remove-btn' onClick={onProductRemove(product)}><DeleteIcon /></button>

这里onProductRemove(product)会在组件渲染阶段直接执行，而非点击时触发，导致App的productsInCart状态在ShoppingCart渲染时被修改，触发React的更新冲突警告。

修复方法：将调用改为回调函数，仅在点击时执行：

<button className='btn remove-btn' onClick={() => onProductRemove(product)}><DeleteIcon /></button>

其他潜在问题修复（避免后续bug） #

1. onQuantityChange函数的判断逻辑错误
   原代码中用if (productsInCart !== -1)判断索引是否有效，这是错误的（productsInCart是数组，永远不会等于-1），应该检查找到的索引值：

function onQuantityChange(itemId, count) {
  setProductsInCart((currentState) => {
    const productIndex = currentState.findIndex((item) => item.id === itemId);
    // 修正为检查productIndex是否有效
    if (productIndex !== -1) {
      // 同时将count转为数字，避免字符串相乘导致异常
      currentState[productIndex].count = Number(count);
    }
    return [...currentState];
  })
}

2. ShoppingCart中select的option值错误
   原代码中value={{num}}会将选项值设为对象，导致select的value与product.count不匹配，应该直接传递数字：

<option value={num} key={num}>{num}</option>

内容的提问来源于stack exchange，提问作者Gavin-walsh