React购物车组件在Context元素变更时未重新渲染问题排查

核心问题在于你违反了React的状态不可变性原则，直接修改了原状态对象和数组的引用，导致React无法检测到状态变化，因此组件不重新渲染。

具体问题分析 #

在changeQuantity函数中：

1. 你直接修改了cart数组中的原对象：cartProduct.quantity ++，这是对原状态的直接篡改，不符合React的状态更新规范。
2. 最后调用setCart(cart)时，传入的还是原来的数组引用。React通过浅比较判断状态是否变化，数组引用未变的情况下，React会认为状态没有更新，因此不会触发组件重渲染。

修复代码 #

修改CartProduct中的changeQuantity函数，通过创建新的数组和对象来实现不可变更新：

const changeQuantity = (operation) => {
  // 生成全新的购物车数组，保持原数据不变
  const updatedCart = cart.map(product => {
    if (product.id !== id) {
      // 不是目标商品，直接返回原对象
      return product;
    }

    // 计算新的数量
    let newQuantity = product.quantity;
    if (operation === 'sum') {
      newQuantity += 1;
    } else if (operation === 'substract') {
      if (newQuantity <= 1) {
        return product;
      }
      newQuantity -= 1;
    }

    // 返回新的商品对象，不修改原对象
    return { ...product, quantity: newQuantity };
  });

  // 传入新数组触发状态更新
  setCart(updatedCart);
}

关键原理 #

React的状态更新依赖引用变化：只有当你传入的新状态与原状态的引用不同时（比如新数组、新对象），React才会识别到状态发生了变化，进而触发组件的重新渲染。保持状态的不可变性是React开发中的核心原则之一，它能避免这类隐性的更新问题，同时让状态变化的追踪更清晰。

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