Почему свойство класса JSON не увеличивается в jsx?

#javascript #reactjs #jsx

Вопрос:

Я нахожусь на этапе обучения реагированию, и у меня возникли проблемы, поскольку :

почему моя переменная json «кол-во» не увеличивается, когда я вызываю функцию increaseqty при нажатии, вот мой 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;

заранее спасибо за помощь!

Ответ №1:

Вы не можете изменять состояние в React как обычную переменную. Что вам нужно сделать, так это использовать функцию setState, предоставляемую React

Что — то вроде этого должно сработать :

 increaseqty()
{
  console.log("this is called");
  this.setState((state) => {
    return { qty: state.qty   1 };
  });
}

Ответ №2:

Не изменяйте состояние напрямую, вы должны использовать setState , и в этом случае вы должны передать функцию, которая получает обновленную версию состояния.

 this.setState((state, props) => ({
  qty: state.qty   1
}));

Вот несколько замечательных документов о состоянии компонентов https://reactjs.org/docs/state-and-lifecycle.html