Получаю NaN в переменную totalPrice (React.js)
Не могу разобраться как избавиться от NaN в totalPrice.
При добавлении товара в корзину onClick={onClickAdd} в переменной {totalPrice} получаю NaN.
Компонент Control.jsx
function Control() {
const { items, totalPrice } = useSelector(selectCart);
const totalCount = items.reduce((sum, item) => sum + item.count, 0);
return (
<ul className="header__top-right">
<li>
<NavLink to="/cart">
<span>{totalPrice} $</span>
<img src={cart} alt="cart" />
<span>{totalCount}</span>
</NavLink>
</li>
</ul>
)
}
Страница карточки товара FullCoffee.jsx
function FullCoffee({ imageUrl, alt, title, price, weights }) {
const [coffee, setCoffee] = React.useState();
const { id } = useParams();
const dispatch = useDispatch();
const cartItem = useSelector(selectCartItemById(id));
const onClickAdd = () => {
const items = {
id,
title,
price,
imageUrl,
alt,
};
dispatch(addItem(items));
};
return (
<div className="full__coffee">
<div className="wrapper">
<Control />
<div className="full__coffee-container">
<h3 className="full__coffee-title">{coffee.title}</h3>
<div className="full__coffee-flex">
<button onClick={onClickAdd} className="button>
Add</button>
</div>
</div>
</div>
</div>
)
}
cartSlice.js
export const cartSlice = createSlice({
name: 'cart',
initialState,
reducers: {
addItem(state, action) {
const findItem = state.items.find(obj => obj.id === action.payload.id);
if (findItem) {
(findItem.count)++;
} else {
state.items.push({
...action.payload,
count: 1,
});
}
state.totalPrice = state.items.reduce((sum, obj) => {
return obj.price * obj.count + sum;
}, 0);
},
},
});