时间戳

首页 > 解决方案 > 如何在反应js中更新多个状态

javascript - 如何在反应js中更新多个状态

问题描述

我不确定问题的标题是否正确。我遇到了一些问题，我不知道如何解决它们。

在我的应用程序中，有购物车页面，有商品列表。每个项目都有一个字段数量。可以更新。我的问题是当我启动 i 状态数量并从中创建两个函数来增加和减少数量时。但问题是当我单击 addQuantity 时，它会同时更新所有产品数量。我真的不知道要解决这个问题，我从过去几天一直试图弄清楚。这是两个项目。

物品图片

这些是我的代码

类 CartContainer 扩展 React.Component { state = { quantity: 1, };

componentDidMount() { this.props.getItemsAddedToCart(); }

使成为（） {

const addItem = () => {
  this.setState({
    quantity: this.state.quantity + 1,
  });
};

const removeItem = () => {
  this.setState({
    quantity: this.state.quantity - 1,
  });
};

购物车.js

return cartData.map((item, index) => { return ( 

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

CartItemDetail.js

return (
  <Grid container className="cart-item-details">

    <Grid xs={12} md={4}>
      {!this.props.team ? (
        <Grid className="counter" xs={12} container>
          <Grid container justify="center" alignItems="center" xs={4}>
            <button
              onClick={this.props.removeItem}
              className="decrement"
            ></button>
          </Grid>
          <Grid container justify="center" alignItems="center" xs={4}>
            <span>{this.props.quantity}</span>
          </Grid>
          <Grid container justify="center" alignItems="center" xs={4}>

            <button
              onClick={this.props.addItem}
              className="increment"
            ></button>
          </Grid>
        </Grid>
      ) : (
        ""
      )}

任何帮助都会很棒，我真的很想弄清楚这一点。

标签： javascriptreactjs

解决方案

像下面这样声明你的状态

state={
quantity:{}
}

使用产品ID或独特的东西来制作数量的关键

const addItem = (id) => {
  this.setState({
    quantity: {
     ...this.state.quantity,
     [id]:this.state.quantity[id]+1
     }
  });
};

const removeItem = (id) => {
  this.setState({
    quantity: {
     ...this.state.quantity,
     [id]:this.state.quantity[id]-1
     }
  });
};

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={this.state.quantity[id]||0}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

推荐阅读