Entonces, quería cambiar este objeto de producto en la interfaz de usuario con un clic de botón y reducir la cantidad del producto. Pero el monto de la cantidad no cambió. ¿Cuál es el mejor movimiento en situaciones como esa?
let product={ a:1,b:2,c:3};Digamos cambiando el valor.
b:5;por favor revise este código de muestra
import React, { useState, useEffect } from 'react'; export default function App() { const [products, setProducts] = useState([ { name: 'Product 1', qty: 1, price: 10 }, { name: 'Product 2', qty: 1, price: 20 }, ]); const [totalAmt, setTotalAmt] = useState(0); useEffect(() => { const total = products.reduce((s, i) => s += i.price * i.qty, 0); setTotalAmt(total); }, [products]); const incrQty = (index) => { setProducts((v) => { const a = JSON.parse(JSON.stringify(v)); // FOR AVOIDING MUTATING DATA, BECAUSE IN STRICT MODE THIS SETSTATE CALLBACK WILL TRIGGER TWICE a[index].qty += 1; return [...a]; }); }; const decrQty = (index) => { setProducts((v) => { const a = JSON.parse(JSON.stringify(v)); a[index].qty -= 1; return [...a]; }); }; return ( <div> Total Amount: Rs.{totalAmt} <ul> {products.map((e, k) => ( <li key={k}> {e.name}, qty={e.qty}, subtotal {e.qty * e.price}, <button onClick={e => incrQty(k)}>Incr Qty</button> { (e.qty > 1)?<button onClick={e => decrQty(k)}>Decr Qty</button>:null } </li> ))} </ul> </div> ); }