Javascript 使用数据的实时数学

我尝试用我制作的+-按钮和从API检索到的产品价格对产品价格乘以产品数量进行实时计算，同时增加或减少产品数量。我收集它没有问题，但我不能用这些做数学运算。请帮帮我

+-按钮代码

IncrementItem(){
    this.setState({ clicks: this.state.clicks + 1 });
  }
  DecreaseItem(){
    this.setState({ clicks: this.state.clicks - 1 });
  }
  ToggleClick(){
    this.setState({ show: !this.state.show });
  }

产品价格代码

{products.harga}

我打算把总数放在这里：

var price = <div className="totalhrg"><NumberFormat value={products.harga} displayType={'text'} thousandSeparator={true} prefix={'Rp. '} /></div>;

var价格=；

---

再次感谢您！你们真的是一个好的，熟练的，非常乐于助人的人

首先，您不应该像这样设置状态：

this.setState({ clicks: this.state.clicks + 1 }); // WRONG

改用这个：

 this.setState((prevState) => ({ clicks: prevState.clicks + 1 })) // CORRECT

这是因为This.state.clicks在重新呈现组件之前不会得到更新，这会造成问题

对于您的情况，最佳做法是将卡信息存储到如下阵列中：

card = [
{
 id : 1,
 price: 4000,
 quantity: 2
},
{
 id : 2,
 price: 8000,
 quantity: 1
}
]

现在您必须更改您的方法：

  IncrementItem(id){
        this.setState((prevState) => (
          {
            ...prevState ,
            card: prevState.card.map(carItem => 
              carItem.id === id  
              ? {...carItem, quantity: cardItem.quantity + 1}
              : {...carItem}
            )
         }));
  }
  DecreaseItem(id){
        this.setState((prevState) => (
          {
            ...prevState ,
            card: prevState.card.map(carItem => 
              carItem.id === id  
              ? {...carItem, quantity: cardItem.quantity - 1}
              : {...carItem}
            )
         }));
  }

然后你可以很容易地计算出卡的总数

  cardSum(){
    const sum = 0
    for (i = 0, i < this.state.card.length; i++) {
      sum += this.state.card[i].quantity * this.state.card[i].price
    }
    return sum
  }

cardSum（）{
常数和=0
对于（i=0，i

也可以在JSX中使用它

{this.state.card.map(cardItem , () => (
  <div className="totalhrg">
    <NumberFormat
      value={cardItem.quantity * cardItem.price } 
      key={cardItem.id}
      displayType={'text'}
      thousandSeparator={true}
      prefix={'Rp. '} />
  </div>
))};

{this.state.card.map（cardItem，（）=>(
))};

是不工作状态的增量和减量。您可以：

console.log（typeof products.harga）

。我想知道的原因是，你只能用数字乘以数字。所以你可能需要把它解析成一个数字。它的工作原理是，我不知道用减量和增量的值作为数量和乘积来做一个活的数学。price@Jurrian我在render（）块中使用了{products.harga}，那么如何在render（）中控制台登录呢？在从render（）返回内容之前运行它。您显示的代码包含一个包含多个数据的数组，而在本例中，我只返回包含1个数据的数组。我认为代码会有所不同，对吗？因为我不能使用.map，因为它不是array@NaufalSyauqi即使只有一项，也可以使用数组。如果必须避免使用数组，则可以使用此行

value={this.item.quantity*this.item.price}

this.item是您的数据对象！