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

Question

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}
        ]

提前致谢！！

Answer 1

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

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

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

Answer 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>
   }
}