Как рассчитать количество каждой позиции, используя коэффициент и количество, а затем суммировать все позиции для расчета подытога

Question

items image

Здесь, на этой картинке, у меня есть 3 позиции с описанием, стоимостью, количеством и суммой. В настоящее время я храню только описание, скорость и количество в редуксе. Сумма только для отображения. Я хочу получить итоговую сумму по всем предметам.

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.

В редуксе я храню элементы как:

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

Заранее спасибо !!

Answer 1

У меня есть два варианта

1. Промежуточный итог можно сохранить при добавлении элемента

начальное состояние:

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

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

Отображение subtotal в пользовательском интерфейсе, оно изменяется при изменении элементов

2. В противном случае, в любом случае вы можете рассчитать промежуточную сумму по элементам ite себя

Я использую reduce()

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

Answer 2

Когда вы отображаете цену в конце строки, укажите класс для этого поля.

После этого просто получите значения этого класса и добавьте их в функцию onChange и отобразите в конце.

Дайте мне знать, как это происходит, или у кого-нибудь есть идея получше.