price показывает undefind что делать?
Я делаю добавление товара в корзину с redux и react. Моя проблема в том что когда я хочу отобразить общую сумму выбранных товаров ретернится NaN.
вот мой CartSlice.js в gonsole.log показывает undefind
import { createSlice } from "@reduxjs/toolkit";
import {toast} from "react-toastify"
const initialState = {
cartItems: localStorage.getItem("cartItems")
? JSON.parse(localStorage.getItem("cartItems"))
: [],
cartTotalQuantity:0,
cartTotalAmount:0,
};
const cartSlice = createSlice({
name:"cart",
initialState,
reducers:{
addToCart(state,action){
const cartIndex = state.cartItems.findIndex(
(item) => item.id === action.payload.id
)
if (cartIndex >= 0){
state.cartItems[cartIndex].cartQuantity += 1
toast.info(` Добавили еще 1 ${action.payload.title} в корзину `,{
position: "bottom-left"
})
}else {
const tempProduct = {...action.payload, cartQuantity:1};
state.cartItems.push(tempProduct);
toast.success(`${action.payload.title} добавлено в корзину`,{
position: "bottom-left"}
)
}
localStorage.setItem("cartItems", JSON.stringify(state.cartItems))
},
removeFromCart(state, action){
const nextCartItems = state.cartItems.filter(
(carteItem) => carteItem.id !== action.payload.id
);
state.cartItems = nextCartItems;
localStorage.setItem("cartItems", JSON.stringify(state.cartItems))
toast.error(`${action.payload.title} удален из корзины`,{
position: "bottom-left"}
)
},
decreaseCart(state, action){
const cartIndex = state.cartItems.findIndex(
(cartItem) => cartItem.id === action.payload.id
)
if(state.cartItems[cartIndex].cartQuantity > 1){
state.cartItems[cartIndex].cartQuantity -= 1;
toast.info(`удалили 1 ${action.payload.title} `,{
position: "bottom-left"}
)
} else if (state.cartItems[cartIndex].cartQuantity === 1){
const nextCartItems = state.cartItems.filter(
(carteItem) => carteItem.id !== action.payload.id
);
state.cartItems = nextCartItems;
toast.error( `${action.payload.title} удален из избранных`,{
position: "bottom-left"}
)
}
localStorage.setItem("cartItems", JSON.stringify(state.cartItems))
},
clearCart(state, action){
state.cartItems = [];
toast.error( `Корзина очищен`,{
position: "bottom-left"}
)
localStorage.setItem("cartItems", JSON.stringify(state.cartItems))
},
getTotals(state, action){
let {total, quantity} = state.cartItems.reduce((cartTotal,cartItem)=>{
const {price, cartQuantity} = cartItem;
const itemTotal = price * cartQuantity;
console.log(typof(price))
cartTotal.total += itemTotal
cartTotal.quantity += cartQuantity
return cartTotal
},{
total:0,
quantity:0
});
state.cartTotalQuantity = quantity;
state.cartTotalAmount = total;
}
}
})
export const {addToCart,removeFromCart, decreaseCart,clearCart, getTotals} = cartSlice.actions
export default cartSlice.reducer;
Вот мой файл Index.jsx и часть кода где я их использую
<div style={{display:'flex', justifyContent:'space-around'}}>
<div>
<h1>Количество</h1>
<div style={{display:'flex', width:'100px',justifyContent:'center',textAlign:'center', alignItems:'center',}}>
<div style={{display:'flex',border:"1px solid",padding:'5px 15px 5px 15px',borderRadius:'5px',}}>
<span style={{ cursor:'pointer',}} onClick = {() => handleDecreaseCart(cartItem)}>-</span>
<h1 style={{margin:'0 20px'}}>{cartItem.cartQuantity}</h1>
<span style={{ cursor:'pointer'}} onClick={() => handleIncreaseCart(cartItem)}>+</span>
</div>
</div>
</div>
<div>
<h1>Общая сумма</h1>
<div>
{cartItem?.sizes.map(cartItem=> <h1>{cartItem.price * cartItem.cartQuantity }</h1>)}
{/* выше показывает NaN */}
{cartItem.price * cartItem.cartQuantity}
</div>
</div>
</div>