Question

大家好，当我尝试删除一个项目时我无法解决这个问题，但我遇到了这个问题 TypeError：cartItems.find is not a function

Cart.utils.js

export const removeItemFromCart = (cartItems, cartItemToRemove) => {
  const existingCartItem = cartItems.find(
    (cartItem) => cartItem.id === cartItemToRemove.id
  );

  if (existingCartItem.quantity === 1) {
    return cartItems.find((cartItem) => cartItem.id !== cartItemToRemove.id);
  }

  return cartItems.map((cartItem) =>
    cartItem.id === cartItemToRemove.id
      ? { ...cartItem, quantity: cartItem.quantity - 1 }
      : cartItem
  );
};

cart.reducer.js

 case CartActionType.REMOVE_ITEM:
  return {
    ...state,
    cartItems: removeItemFromCart(state.cartItems, action.payload),
  };

checkoutItem.js

      ........

        <span className="left-arrow" onClick={() => removeItem(item)}>
          &#10096;
        </span>
       .......
  );
};

const mapDispatchToProps = (dispatch) => ({
  removeItem: (item) => dispatch(removeItemFromCart(item)),
});

export default connect(null, mapDispatchToProps)(CheckoutItem);

Answer 1

@buzzato 关于问题的根源和解决方案是正确的。

错误 cartItems.find is not a function 意味着在某些时候 cartItems 不是 array。当您发送操作以移除数量为 1 的项目时，您会遇到以下条件：

if (existingCartItem.quantity === 1) {
  return cartItems.find((cartItem) => cartItem.id !== cartItemToRemove.id);
}

.find() 实际上返回匹配条件的第一个值，而不是匹配数组。因此，在达到该条件后，您的 state.cartItems 将成为单个对象而不是数组。下次尝试删除任何项目时，您将收到错误 cartItems.find is not a function，因为您正在尝试对对象调用 .find()。

您想使用 .filter() 而不是 .find()，因为 filter() 返回一个包含与您的条件匹配的每个元素的数组。

类型错误：cartItems.find 不是函数

1 个答案: