购物车商品数量在UI界面不更新问题求助

你用Fake Store API开发购物车时，添加商品后全局状态的数量已更新，但UI未同步，核心原因是直接修改了原state中的对象/数组，导致React无法检测到状态变化。

原代码的问题分析 #

• 当商品已存在时，exist.qty += 1是直接修改原state数组里的元素对象，属于可变操作，React依赖引用变化判断状态更新，这种修改不会触发组件重渲染。
• 返回的新state中，products数组的引用未改变，React会判定这部分状态无更新，因此UI不会同步。

修正后的Reducer代码 #

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_TO_CART":
      const newItem = action.payload;
      const exist = state.products.find((item) => item.id === newItem.id);
      if (exist) {
        // 通过map返回新数组，为目标商品创建新对象更新数量
        return {
          ...state,
          quantity: state.quantity + 1,
          products: state.products.map(item => 
            item.id === newItem.id 
              ? { ...item, qty: item.qty + 1 } 
              : item
          )
        };
      } else {
        // 创建新的商品对象加入数组，同时更新总数量
        return {
          ...state,
          products: [...state.products, { ...newItem, qty: 1 }],
          quantity: state.quantity + 1
        };
      }
    // 必须添加default分支，返回原state
    default:
      return state;
  }
};

关键修正点 #

• 使用map生成新的products数组，对需要更新的商品创建新对象（通过展开运算符复制原属性后覆盖qty），确保数组和对象的引用都发生变化，让React能检测到状态更新。
• 不直接修改传入的newItem，而是创建新对象{ ...newItem, qty: 1 }，避免污染原数据。
• 补充default分支，这是Reducer的规范写法，保证未匹配的action不会导致状态丢失。
• 原else分支遗漏了总数量quantity的更新，修正后总数量也能同步更新。

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