Estoy en la fase de aprendizaje de reaccionar y tengo problemas como:
¿Por qué mi variable json "cantidad" no aumenta cuando llamo a la función de aumento de cantidad al hacer clic? Aquí está mi código app.js:
import react from "react"; class cartitem extends react.Component{ constructor() { super(); this.state = { title:"IPhone 13", price:100000, qty:1 } } increaseqty() { console.log("this is called"); this.state.qty++; } decreaseqty() { this.state.qty--; return; } render(){ return ( <div> <h1>CART</h1> <div className="cart-item"> <div className="left-block"><img/></div> <div className="right-block"> <div className="item-details"> <div>ITEM:{this.state.title}</div> <div>PRICE: {this.state.price}</div> <div>QTY:{this.state.qty}</div> </div> <div className="action-buttons"> <img src="https://cdn-icons-png.flaticon.com/512/992/992651.png" onClick = {this.increaseqty.bind(this)}/> <img src= "https://cdn-icons-png.flaticon.com/512/1828/1828906.png"/> <img src="https://cdn-icons-png.flaticon.com/512/1345/1345874.png"/> </div> </div> </div> </div> ) } } export default cartitem;¡Gracias por la ayuda por adelantado!
No puede mutar el estado en React como una variable normal. Lo que debes hacer es usar la función setState provista por React
Algo como esto debería funcionar :
increaseqty() { console.log("this is called"); this.setState((state) => { return { qty: state.qty + 1 }; }); }No modifique el estado directamente, debe usar setState y, en este caso, debe pasar una función que reciba la versión actualizada del estado.
this.setState((state, props) => ({ qty: state.qty + 1 }));Aquí hay una excelente documentación sobre el estado en los componentes https://reactjs.org/docs/state-and-lifecycle.html