So long story short, I have been working on a Full Stack website for a client and I have it all finished however I have an issue!
For some reason when I use Math.max(...shipArray)
, It will work correctly on PC but when you try to view it on mobile. It returns NaN, this also effects the shoppingTotal
!
Anyways here's my code:
const shippingCost = () => {
const basket = JSON.parse(window.localStorage.getItem("productData"));
const shipArray = [];
let shippingTotal = 0;
if(!basket)
setBasketEmpty(true);
basket.map((item, key) => {
shipArray.push(item.product.shipping_cost);
});
console.log(shipArray)
shippingTotal = shippingTotal + Math.max(...shipArray);
updateShoppingTotal(shippingTotal);
}
const updateShoppingTotal = (shipping) => {
var tempCost = 0;
var finalCost = 0;
var tempCostArray = [];
var quantity = window.localStorage.getItem("productData");
if(!storageData)
setBasketEmpty(false);
if(quantity){
JSON.parse(quantity).map(quan => {
tempCost = quan.product.product_price * quan.quantity;
tempCostArray.push(tempCost);
});
tempCostArray.forEach(item => {
if(!isNaN(item)){
finalCost = finalCost + item + shipping;
}
});
setShipping(shipping);
window.localStorage.setItem("originalPrice", parseFloat(finalCost).toFixed(2));
window.localStorage.setItem("basketTotal", parseFloat(finalCost).toFixed(2))
setShoppingTotal(parseFloat(finalCost).toFixed(2))
}
}
I'm also using ReactJS, not React-Native.
Thanks
EDIT: Just to be on the safe side, I tried to put some random numbers in manually and it does appear to be the shipArray
that's the issue, so If anyone knows why it could be adding a non-number to the array then that would be helpful!
If I had a brain I'd be dangerous! LOL
So to view a product I had 2 Components, one for larger devices and one for mobiles.
For the the first Component, I added the shipping cost to localStorage but I didn't do that for the mobile Component so when i tried to read the item.product.shipping_cost
on mobile, it of course couldn't find it so was saying undefined
.
THIS BLOODY LINE HERE:
oldBasket.push({product: {shipping_cost:this.state.productData.shipping_cost,});
That line wasn't on the Mobile Component!
Thanks for the advice though everyone