正在从 React Native Redux 中删除不正确的项目

Question

我在 React 本机应用程序中有以下用于购物车的 redux-reducer。问题是，当我尝试删除购物车的第一项时，只会删除列表中的最后一项。我该如何解决这个错误？

购物车操作：

export const removeFromCart = (payload) => {
  return {
    type: REMOVE_TO_CART,
    payload,
  }
}

const cartItems = (state = [], action) => {
  switch (action.type) {
    case ADD_TO_CART:
      //destructure the payload (which is the item) and take id
      const {_id} = action.payload;
      //check if there are duplicates
      const dupe = state.find(obj => obj._id === _id);
      //if duplicates, return state, else return state with the new payload
      return dupe ? state : [...state, action.payload];
    case REMOVE_TO_CART:
      return state.filter(cartItem => cartItem !== action.payload);
    case CLEAR_TO_CART:
      //return empty state which clears cart
      return (state = []);
  }
  //return the state
  return state;
};

购物车组件代码：

<IconButton
  icon="delete"
  color={"red"}
  size={25}
  onPress={() => {
  toggleModal();
  props.removeFromCart(item);
  Toast.show({
       type: "info",
       position: "top",
       text2: `${item.name.substring(0, 15)}... has been removed from cart!`,
       topOffset: 60,
    }}/>

//loop through the states from the redux store to convert into props so they can be used in this screen
const mapStateToProps = state => {
  const {cartItems} = state; //state coming from store
  return {
    cartItems: cartItems,
  };
};

//for grabbing actions from cartActions and adding and removing products
const mapDispatchToProps = dispatch => {
  return {
    clearCart: () => dispatch(actions.clearCart()),
    removeFromCart: item => dispatch(actions.removeFromCart(item)), //deleting a single item
  };
};

Answer 1

你能改变吗

return state.filter(cartItem => cartItem !== action.payload);

至：

return […state.filter(cartItem => cartItem.id !== action.payload.id)];

正在从 React Native Redux 中删除不正确的项目

Incorrect Item is being removed from React Native Redux

cart

e-commerce

react-native

redux

react-redux