undefined 不是一个对象(评估 'addProduct.price')。我不知道为什么我会收到此错误？

Question

我的代码看起来很好，因为我检查了状态，它显示我在状态中添加和删除的项目很好，但我不知道为什么会出现这个错误？

在CartScreen.js中，onRemove((正在调度存储在store/actions/cart.js中的操作，以从购物车中删除项目。

CartScreen.js

import React from "react";
import { View, Text, FlatList, Button, StyleSheet } from "react-native";
import { useSelector, useDispatch } from "react-redux";
import Colors from "../../constants/Colors";
import CartItem from "../../components/shop/CartItem";
import * as cartActions from "../../store/actions/cart";
const CartScreen = (props) => {
const cartTotalAmount = useSelector((state) => state.cart.totalAmount);
const dispatch = useDispatch();
const cartItems = useSelector((state) => {
const transformedCartItems = [];
for (const key in state.cart.items) {
transformedCartItems.push({
productId: key,
productTitle: state.cart.items[key].productTitle,
productPrice: state.cart.items[key].productPrice,
quantity: state.cart.items[key].quantity,
sum: state.cart.items[key].sum,
});
}
return transformedCartItems;
});
return (
<View style={styles.screen}>
<View style={styles.summary}>
<Text style={styles.summaryText}>
Total:{" "}
<Text style={styles.amount}>${cartTotalAmount.toFixed(2)}</Text>
</Text>
<Button
color={Colors.primary}
title="Order Now"
disabled={cartItems.length === 0}
/>
</View>
<FlatList
data={cartItems}
keyExtractor={(item) => item.productId}
renderItem={(itemData) => (
<CartItem
quantity={itemData.item.quantity}
title={itemData.item.productTitle}
amount={itemData.item.sum}
onRemove={() => {
dispatch(cartActions.removeFromCart(itemData.item.productId)); //this is the function to remove item from cart.
}}
/>
)}
/>
</View>
);
};
const styles = StyleSheet.create({
screen: {
margin: 20,
},
summary: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginBottom: 20,
padding: 10,
shadowColor: "black",
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 8,
elevation: 5,
borderRadius: 10,
backgroundColor: "white",
},
summaryText: {
fontFamily: "openSansBold",
fontSize: 18,
},
amount: {
color: Colors.secondary,
},
});
export default CartScreen;

store/actions/cart.js:

import { ADD_TO_CART, REMOVE_FROM_CART } from "../actions/cart";
import CartItem from "../../models/cart-item";
const intialState = {
items: {},
totalAmount: 0,
};
export default (state = intialState, action) => {
switch (action.type) {
case ADD_TO_CART:
const addedProduct = action.product;
const prodPrice = addedProduct.price;
const prodTitle = addedProduct.title;
let updatedOrNewCartItem;
if (state.items[addedProduct.id]) {
updatedOrNewCartItem = new CartItem(
state.items[addedProduct.id].quantity + 1,
prodPrice,
prodTitle,
state.items[addedProduct.id].sum + prodPrice
);
} else {
updatedOrNewCartItem = new CartItem(1, prodPrice, prodTitle, prodPrice);
}
return {
...state,
items: { ...state.items, [addedProduct.id]: updatedOrNewCartItem },
totalAmount: state.totalAmount + prodPrice,
};
case REMOVE_FROM_CART:
const selectedCartItem = state.items[action.pid];
const currentQty = selectedCartItem.quantity;
let updatedCartItems;
if (quantity > 1) {
const updatedCartItem = new CartItem(
selectedCartItem.quantity - 1,
selectedCartItem.productPrice,
selectedCartItem.productTitle,
selectedCartItem.sum - selectedCartItem.productPrice
);
updatedCartItems = { ...state.items, [action.pid]: updatedCartItem };
} else {
updatedCartItems = { ...state.items };
delete updatedCartItems[action.pid];
}
return {
...state,
items: updatedCartItems,
totalAmount: state.totalAmount - selectedCartItem.productPrice,
};
default:
break;
}
return state;
};

在这段代码中，addedProduct.price位于addToCart((中，它运行良好。我可以在我的购物车中添加项目，但如果我试图通过调用onRemove((来删除项目，那么它会给我上面的错误。我不知道为什么以及如何解决这个问题？

Answer 1

我在removeFromCart()中返回了操作类型ADD_To_Cart，这就是我收到此错误的原因。

之前：

export const ADD_TO_CART = "ADD_TO_CART";
export const REMOVE_FROM_CART = "REMOVE_FROM_CART";
export const addToCart = (products) => {
return { type: ADD_TO_CART, product: products };
};
export const removeFromCart = (productId) => {
return { type: ADD_TO_CART, pid: productId };
};

因此，我已经更正了removeFromCart()中返回的操作类型。

export const ADD_TO_CART = "ADD_TO_CART";
export const REMOVE_FROM_CART = "REMOVE_FROM_CART";
export const addToCart = (products) => {
return { type: ADD_TO_CART, product: products };
};
export const removeFromCart = (productId) => {
return { type: REMOVE_FROM_CART, pid: productId };
};

现在一切正常。