Estoy haciendo un pequeño sitio de comercio electrónico y actualmente estoy trabajando en un carrito de compras. la idea es que cada vez que presione el botón que contiene la función Arriba, la matriz debe cambiar y luego imprimirse en la pantalla a través de item.newStock. Sin embargo, la primera vez que presiono el botón no hace nada y la segunda vez agrega uno. Pero cuando hago console.log, el número es uno más alto que lo que se imprime a través de item.newStock.

¿Alguna idea de por qué está sucediendo eso?

 const Table = () => { return ( <div class="container"> <table class="table m-4"> <thead> <tr> <th scope="col">Cake</th> <th scope="col">QTY</th> <th scope="col">Price</th> </tr> </thead> <tbody> {array.map((item) => { if (item.newStock > 0) { return ( <> <tr> <th scope="row">{item.title}</th> <td>{item.newStock}</td> <td>${item.price}</td> <div class="changeQTY"> <h5>QTY</h5> <button class="up" onClick={Up}> + </button> <button class="down"> <span class="minus">-</span> </button> <button>Delete</button> </div> </tr> </> ); } })} </tbody> </table> <button>Confirm Purchase</button> </div> ); };

 function Up() { setBuyQTY(parseInt(buyQTY) + 1); setArray((state) => state.map((x) => x.id === id ? { ...x, newStock: parseInt(buyQTY), } : x, ), ); }