Блог

У меня есть таблица данных, которая показывает конкретный продукт и сумму, приобретенную в течение дня. Они были вставлены как разные объекты, и я хочу добавить количество приобретенных товаров для каждого продукта.

Моя таблица выглядит так

 Apple 10 01/20/2021 18:30
Apple 5  01/29/2021 04:30
Apple 20 01/29/2021 07:30
 

Но я хочу, чтобы они были объединены в подобные

 Apple 35
 

До сих пор я так устанавливал таблицу

 <Table striped="true" size="sm" style={{width: "20%"}}>
 <tbody>
  {this.state.products?.map((product, index) => (
   <tr key={`entity-${index}`}>
     <td>{product.type}</td>
     <td>{product.amount}</td>                        
   </tr>
  ))}
 </tbody>
</Table>
 

Как я могу объединить эти данные в зависимости от их типа?

Ниже приведены шаги, которые я предпринял для решения проблемы, упомянутой выше. Я оставил вам использование state для его реализации в соответствии с вашими требованиями.

1. Сначала я создал массив фруктов и их соответствующее количество, купленное
2. Создан набор для получения уникальных фруктов
3. В JSX я перебрал набор, а затем вычислил общее количество этих фруктов, сначала отфильтровав название плода, а затем добавив количество вместе, используя reduce
4. Эти значения, наконец, были отображены в таблице

 class Fruits extends Component {
  render() {
    const purchasedItems = [
      { fruit: "apple", quantity: 5 },
      { fruit: "apple", quantity: 2 },
      { fruit: "apple", quantity: 10 },
      { fruit: "mango", quantity: 5 },
      { fruit: "mango", quantity: 8 },
    ];

    let uniqueFruit = [...new Set(purchasedItems.map((x) => x.fruit))];
    
    return (
      <div>
        <table>
          <tbody>
            {uniqueFruit.map((fruit_name) => {
              let total = purchasedItems
                .filter((item) => 
                  item.fruit === fruit_name
                )
                .reduce((acc, curr) => acc   curr.quantity, 0);
              return(
              <tr>
                <td>{fruit_name}</td>
                <td>{total}</td>
              </tr>)
            })}
          </tbody>
        </table>
      </div>
    );
  }
}