Search code examples
javascriptarraysreactjsmathmobile-devices

Why Do Mobile Phones refuse to read Math.max values?


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!


Solution

  • 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