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

Question

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!

@Carcigenicate I have yes, at first I thought there may have beene and undefined value but that wasn't the case — SimplisticApps, Sep 15 '20 at 20:16
could always use reduce `const maxShippingCost = basket.reduce((max, item) => item.product.shipping_cost > max ? item.product.shipping_cost : max, basket[0].product.shipping_cost);` — epascarello, Sep 15 '20 at 20:19
@Carcigenicate the type is an integer, one thing it might be the the Math function may be running before i push the data into the array. — SimplisticApps, Sep 15 '20 at 20:24
@Itamar Nah I think I've narrowed it down to a non number value in the array which I think is because the array starts off empty and doesn't update properly on mobile so I'm going to try something different tomorrow. Thanks for the advice though. — SimplisticApps, Sep 15 '20 at 22:28

score 1 · Answer 1 · answered Sep 16 '20 at 02:22

1

It could be the spread operation ...

If you're testing on old phones (and especially things like those cheap "burner" TracFones) then they don't have a lot of modern JS features (pretty sure no spread, no arrow functions, maybe even no let?).

I used to develop for those and a lot of modern JS stuff you can't use. They are often running Android 4.4 or earlier.

A nice resource is can I use (link to spreads). You'll notice that isn't supported in Android 4.4

edit: if this code is being transpiled by Babel it probably replaces this kind of thing with something more old school.

answered Sep 16 '20 at 02:22

g23

666
3
9

I don't think it's the phone I'm using as it's a Galaxy S10+. However it could be Babel like you said! I did try to explicitly set the number array in the Math.max function instead of the `shipArray` and and It worked as intended. So I can only assume the function will run twice on PC when the data in the array changes but on Mobile it doesn't and will only read the empty `shipArray` – SimplisticApps Sep 16 '20 at 09:58

score 0 · Accepted Answer · answered Sep 16 '20 at 11:38

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

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

2 Answers2