为何会出现“Array.prototype.filter()期望箭头函数末尾返回值”错误？

你的代码存在两个核心问题，涉及React状态更新的不可变性原则及代码冗余：

1. decreaseQty函数直接修改原状态元素 #

在map遍历中，你直接执行i.qty--操作，这里的i是cartItems数组元素的引用，相当于直接修改了原状态对象。React依赖状态的浅比较判断是否触发重渲染，直接修改原状态会导致React无法检测到变化，进而出现数量修改后界面不刷新的异常。

修复方式：找到目标元素时返回新对象，避免修改原状态：

function decreaseQty(item) {
  if (item.qty > 1) {
    const updatedItems = cartItems.map((i) => {
      if (i.product._id === item.product._id) {
        // 生成新对象替换原元素，保持状态不可变
        return { ...i, qty: i.qty - 1 };
      }
      return i;
    });

    setCartitems(updatedItems);
  }
}

2. removeItem函数代码冗余 #

filter回调中的if判断完全可以简化，直接返回判断条件即可，无需额外包裹：

function removeItem(item) {
  const updatedItems = cartItems.filter(i => i.product._id !== item.product._id);
  setCartitems(updatedItems);
}

补充说明 #

React状态必须保持不可变性，所有状态更新都应生成新的对象或数组，而非直接修改原状态。这是保证组件正确渲染、状态可追溯的核心要求。

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