为什么JSON类属性在jsx中没有增加?

Question

我在学习阶段的反应，我有问题:

为什么我的json变量不是"qty"在点击时调用递增函数，以下是我的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;

提前感谢您的帮助!

Answer 1

在React中你不能将状态作为一个普通变量来改变。你必须做的是使用React

提供的setState函数应该这样做:

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

Answer 2

不要直接修改state，你应该使用setState，在这种情况下，你应该传递一个函数来接收state的最新版本。

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

这里有一些很好的关于组件状态的文档https://reactjs.org/docs/state-and-lifecycle.html