为什么JSX中class组件的JSON属性qty点击触发函数后未增加

核心问题 #

• 类组件中直接修改this.state属性不会触发组件重渲染，React要求所有state修改必须通过this.setState()方法执行。
• 你现有代码中直接执行this.state.qty++仅修改了内存中的state值，没有触发页面更新，所以看不到数值变化。

修复后完整代码 #

import React from "react";

class CartItem extends React.Component{
    constructor()
    {
        super();
        this.state = {
            title:"IPhone 13",
            price:100000,
            qty:1
        }   
    }
    // 箭头函数自动绑定this，无需额外bind
    increaseqty = () => {
        console.log("this is called");
        this.setState({
            qty: this.state.qty + 1
        })
    }
    decreaseqty = () => {
        this.setState({
            qty: this.state.qty - 1
        })
    }
    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} alt="增加"/>
           <img src= "https://cdn-icons-png.flaticon.com/512/1828/1828906.png" onClick={this.decreaseqty} alt="减少"/>
           <img src="https://cdn-icons-png.flaticon.com/512/1345/1345874.png" alt="删除"/>
           </div>
           </div>
           </div>
           </div>
        )
    }
}
export default CartItem;

优化建议 #

• 状态更新如果依赖前一次的state值，推荐使用函数式写法的setState，避免异步更新导致的取值异常：

increaseqty = () => {
  this.setState(prevState => ({
    qty: prevState.qty + 1
  }))
}

• React组件名遵循帕斯卡命名规范，建议将cartitem修改为CartItem。

内容的提问来源于stack exchange，提问作者Aman panwar