Randy_Johnson's avatar

ReactJS Var update in setItem not refreshing

On the console log, it shows that items has been changed with the amount incremented. But the objFound.amount ++; setItems(items); isn't detected as changed.

    function handleAddProductToCart(product) {
        let objFound = items.find(object => object.product_id === product.id);

        if (objFound === undefined) {
            let obj = {
                cart_id: cart.id,
                product_id: product.id,
                amount: 1
            }
            let arr = [...items, obj]
            setItems(arr);
        }
        else
        {
					// The problem is here
            objFound.amount ++;
            setItems(items);
        }
    }
0 likes
10 replies
Sinnbeck's avatar

Why not send this action to the backend and just let inertia handle it? No need to do this in the browser manually

Randy_Johnson's avatar

There are a couple of reasons.

  1. I tried with the back end but it wouldn't update the list. I tried the stuff you mentioned in the other post but I don't know, I just couldn't get it to work.
  2. I thought that maybe if I work with the data client side and only make little posts that it would save stress on the server all round making the application faster.
Sinnbeck's avatar

@Randy_Johnson But you are going to save what is put in the basket on the server anyways? So you add the item to the basket and reload the basket. As I said in the other post, you really should make a test page to learn how inertia works. Having to make these workarounds all ove the place is probably not a good idea :)

Sinnbeck's avatar
Sinnbeck
3 years ago
Best Answer
Level 102

Oh and when working with data in react, you cannot mutate it. All data should be "immutable". So in your example, if you want to alter an object, you need to duplicate the array like you do here

            let arr = [...items, obj]

but then swap out the item you want to alter with a changed on :)

I personally like to use immer, to change data before setting state https://immerjs.github.io/immer/

Randy_Johnson's avatar

Yeah, you are totally right, am p***ing in the wind right now.

Sinnbeck's avatar

@Randy_Johnson I really struggled when I was first learning react as well. The learning curve is quite steep. And add in inertia and its even steeper :) I was just lucky to have had used react for a while when I started using inertia

Randy_Johnson's avatar

@Sinnbeck Yes! my second week on this. But its coming along quite nicely, just gotta figure this inertia out.

I figured out the return redirect('/dashboard/products'); (no idea why it wouldn't work yesterday) which return the main page, with this said, I would of thought that all the useStates would refresh and trickle down.

You have to pardon my imbecility.

Route::get('/dashboard/products', function () {
    $cart = Cart::all();
    $items = Item::all();
    $products = Product::all();
    return Inertia::render('Products')->with(['products' => $products, 'items' => $items, 'cart' => $cart]);
})->middleware(['auth', 'verified'])->name('dashboard');

export default function Products(props) {

    const [cart, setCart] = useState([]);
    const [items, setItems] = useState([]);
    const [products, setProducts] = useState([]);

    useEffect(() => {
        setCart(props.cart);
        setItems(props.items);
        setProducts(props.products);
    }, [items]);

would that just not reset all the useStates to the db?

Sinnbeck's avatar

@Randy_Johnson If you put it in a useState() it wont update, unless you explicitly tell inertia to flush the state {preserveState: false}. But often you dont actually need useState(). For example the cart. If the backend should be the only source of truth for it, you should pass it down into inertia, but dont bind it in useState. Just let inertia handle all updates

You can also get setState() to update, by using a useEffect()

1 like

Please or to participate in this conversation.