React Hook useState Not Updating UI

Question

I am new to React Hooks and I'm trying to update the quantity in a shopping cart using the following code;

import React, { useState, useEffect } from "react";
import cookie from "react-cookies";
import CheckoutItems from "./CheckoutItems";
import restHelper from "../../shared/RestHelper";

const Checkout = () => {
    const [cart, setCart] = useState(null);

    useEffect(() => {
        const cartId = cookie.load("RbCartId");

        if (cartId){
            (async () => {
                const cart = await restHelper.getUserCart(cartId);
                setCart(cart);
            })();
            }
    }, []);

    const handleQtyUpdate = (evt, id) => {
        let _cart = cart;
        let items = _cart.cartItems.filter(x => x.id === id);
        let cartItem = { ...items[0] };
        cartItem.quantity = Number(evt.target.value);
        const index = _cart.cartItems.findIndex(x => x.id === cartItem.id);
        _cart.cartItems[index] = cartItem;
        setCart(_cart);
    };

    return (
        <section>
            <div className="container" style={{ marginTop: "80px" }}>
                <h3 className="rb-highlight">Shopping Cart</h3>
                <table className="table" style={{marginTop: "20px"}}>
                    <thead>
                        <tr>
                            <th>Items</th>
                            <th style={{ textAlign: "right" }}>Price</th>
                            <th style={{ textAlign: "right" }}>Quantity</th>
                            <th style={{ textAlign: "right" }}>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <CheckoutItems cart={cart} onQtyUpdate={handleQtyUpdate} />
                    </tbody>
                </table>
            </div>
        </section>
    );
}
export default Checkout;

The CheckoutItems component is

import React from "react";

function CheckoutItems({cart, onQtyUpdate}){
    if (!cart || cart.cartItems === 0){
        return <tr><td colSpan="4"><span className="rb-highlight">There are no items in your cart</span></td></tr>;
    }
    else{
        const cartItems = cart.cartItems.map((item, index) => {
            return <tr key={index}>
                <td>{item.description}</td>
                <td style={{textAlign: "right"}}>&euro;{item.cost}</td>
                <td style={{textAlign: "right"}}><input type="text" id={item.id} name="quantity" value={item.quantity} onChange={(evt) => onQtyUpdate(evt, item.id)} /></td>
                <td style={{textAlign: "right"}}>&euro;{item.cost * item.quantity}</td>
            </tr>
        })
        return cartItems;
    }
}

export default CheckoutItems;

The cart items are successfully updated in handleQtyUpdate however the value isn't updated in the UI. From what I have read I should be using useEffect to update the cart but I'm not sure how to go about using it from handleQtyUpdate.

not hooks problem but existing object mutation (instead using new object) in state updating method .... would fail in `setState`, too — xadm, Jan 11 '20 at 01:56

score 22 · Accepted Answer · answered Jan 11 '20 at 01:50

22

The issue is state comparisons are shallow, meaning, in the case of an object only the reference will be compared.

In your example, you update the cartItems property but not the object instance, so as far as React is concerned the state hasn't changed because it won't check individual properties.

Try creating a completely new cart each time and you should see the UI update e.g.

 setCart({ ..._cart })

answered Jan 11 '20 at 01:50

James

80,725
18
167
237

The cart is a single object with an array of items so the following worked; `setCart(Object.assign({}, _cart))` – Ray Jan 12 '20 at 01:18
@Ray the spread operation in my example is the equivalent to `Object.assign` – James Jan 12 '20 at 01:23
1

My bad, I tried `[..._cart]` instead of `{..._cart}`. – Ray Jan 14 '20 at 10:05

score 0 · Answer 2 · answered Jan 11 '20 at 01:52

0

You should have a copy of the object using spread operator

setCart({..._cart})

answered Jan 11 '20 at 01:52

Fábio BC Souza

1,170
19
22

React Hook useState Not Updating UI

2 Answers2

Linked