Array.prototype.filter() 期望在箭头函数末尾返回一个值 - 为什么？

Question

我试图理解为什么会出现这个错误，我找不到与这里其他问题的相似之处。

function decreaseQty(item) {
  if (item.qty > 1) {
    const updatedItems = cartItems.map((i) => {
      if (i.product._id === item.product._id) {
        i.qty--;
      }
      return i;
    });

    setCartitems(updatedItems);
  }
}

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

Answer 1

您忘记在回调函数中返回 false。过滤器函数的回调应返回 true 或 false。

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

地图也是如此

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);
  }
}

Answer 2

您应该使用状态设置器的回调变体来获取当前项目并过滤它们。

此外，过滤器函数只需要返回一个布尔值，因此只需返回您的条件即可。

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

与映射函数相同，但请确保在修改时返回一个新对象（不变性）：

function decreaseQty(item) {
  setCartitems(prevItems => prevItems.map((currItem) => {
    if (currItem.product._id !== item.product._id) return currItem;
    return { ...currItem, qty: Math.max(currItem.qty - 1, 1) };
  }));
}