React中useState数组内对象更新后useEffect未触发控制台打印问题

你更新已有商品数量时，直接修改了状态对象的属性但未调用setCart更新状态。React依赖状态的引用变化检测更新，修改原对象属性不会改变cart数组的引用，因此React认为状态未变化，不会触发重渲染，监听cart的useEffect自然不会执行。

遵循React状态不可变原则，更新状态时始终生成新的数组/对象，再通过setCart触发更新：

const addToCart = (item) => {
  // 查找购物车中是否存在同款商品
  const existingItem = cart.find(cartItem => cartItem.id === item.id);
  
  if (existingItem) {
    // 生成新数组，更新目标商品的数量
    setCart(prevCart => 
      prevCart.map(cartItem => 
        cartItem.id === item.id 
          ? {...cartItem, quantity: cartItem.quantity + 1} 
          : cartItem
      )
    );
  } else {
    // 添加新商品到购物车
    setCart(prevCart => [...prevCart, {id: item.id, name: item.name, quantity: 1}]);
  }
};

• 用find()替代filter()：仅需查找单个匹配商品，find直接返回目标对象（或undefined），逻辑更简洁高效
• 不可变更新：通过map生成新数组，对目标商品使用展开运算符创建新对象并更新quantity，确保原状态不被直接修改
• 统一用setCart更新：无论添加新商品还是修改数量，都通过setCart让React感知到状态变化

修改后，更新已有商品数量时cart数组的引用会改变，useEffect会正常触发并打印最新的cart状态。

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