如何使用费率和数量计算每个项目的金额，然后将所有项目相加计算 subTotal

Posted 2023-03-05

【中文标题】如何使用费率和数量计算每个项目的金额，然后将所有项目相加计算 subTotal

【英文标题】：How to calculate each item amount using rate and quantity and then sum up all the items to calculate subTotal

【发布时间】：2020-07-14 19:48:00

【问题描述】：

items image

在这里，在这张图片中，我有 3 个项目，分别是描述、价格、数量和金额。目前，我只在 redux 中存储描述、速率和数量。金额仅用于显示。我想得到所有项目的小计。

items.map((item, index) => 
     return

         <Input
          placeholder="Description"
          value=item && item.description
          onChange=event => 
            setValuesToRedux(
              `items[$index].description`,
              event.target.value
            );
          
        />
         <Input
          placeholder="0.00"
          value=item && item.rate
          onChange=event => 
            setValuesToRedux(
              `items[$index].rate`,
              event.target.value
            );
          
        />

         <Input
          placeholder="0"
          value=item && item.quantity
          onChange=event => 
            setValuesToRedux(
              `items[$index].quantity`,
              event.target.value
            );
          
        />
      <p>item && item.rate && item.quanity && item.rate * item.quantity</p>
    
   ))

在获得所有项目的费率和数量后，我想计算小计，我不知道该怎么做，因为我们将所有内容都存储在 onChange 函数中。

在 redux 中，我将项目存储为：

 items: [ description: "item1", rate: 200, quantity: 1, 
           description: "item2", rate: 300, quantity: 1,
           description: "item3", rate: 400, quantity: 1
        ]

提前致谢！！

【问题讨论】：

你能在问题中分享你在redux中存储的项目结构吗？

我已经编辑了问题

【参考方案1】：

当您在行尾显示价格时，为该字段提供一个类。

之后，只需获取该类的值并将它们添加到onChange函数中并显示在最后。

让我知道进展如何或有人有更好的主意。

【讨论】：

我没有得到你。我们使用类来添加样式。

【参考方案2】：

我有两个选择

1。您可以在添加项目时存储小计

初始状态：

const state = 
  items: [],
  subtotal: 0,

//...
switch(type) 
    case ADD_ITEM:
      return 
        ...state,
        items: [...state.items, payload],
        subtotal: state.subtotal + (payload.rate * payload.quantity)
      
    

在 UI 中渲染 subtotal，它会随着项目的变化而变化

2。否则，无论如何您都可以从项目本身计算小计

我正在使用reduce()

//..
render() 
   const subtotal = items.reduce((total, item) => total + item.rate * item.quantity, 0);
   return() 
      //Items
      <p>Subtotal: subtotal<p>
   

【讨论】：

第二种方法有效，但如果我在同一组件中显示 subTotal。我有 Item 组件，其中我有与项目相关的字段和 ItemCalculation 组件，我在其中显示小计值。我在 Main 组件中调用了这两个组件。现在，我在 ItemCalculation 组件中使用第二种方法，在第一次渲染时，它不会显示小计值，而是在刷新页面时显示。