在表中显示反应中相同项目的值

Question

我正在用 React.JS 开发一个应用程序

我有数组：

const array = [
    {
      "id": 1,
      "date": {
        "id": 1,
        "name": "202001"
      },
      "item": {
        "id": 1,
        "name": "I1",
        "description": "item1"
      },
      "type": {
        "id": 1,
        "name": "type1"
      },
      "price": 100,
      "unit": "unit1"
      },
      {
      "id": 2,
      "date": {
        "id": 2,
        "name": "202002"
      },
      "item": {
        "id": 1,
        "name": "I1",
        "description": "item1"
      },
      "type": {
        "id": 1,
        "name": "type1"
      },
      "price": 200,
      "unit": "unit1"
    },
    {
      "id": 3,
      "date": {
        "id": 2,
        "name": "202002"
      },
      "item": {
        "id": 2,
        "name": "I2",
        "description": "item2"
      },
      "type": {
        "id": 2,
        "name": "type2"
      },
      "price": 300,
      "unit": "unit2"
    },
  ]

而我显示的数据如表所示：

ITEM	TYPE	202001	202002	TOTAL
I1 // item1	type1	100 // unit1	200 // unit1	300
i2 // item2	type1	-	300 // unit2	300
TOTAL		100	500	600

我这样做是为了获得一些值：

items = array.reduce((acc, e) => {
    if (!acc[e["item"]["name"]]) {
      acc[e["item"]["name"]] = {
        [e["date"]["name"]]: e["price"],
        'type': e.type?.name,
        'description': e.item?.description,
      }
    } else {
      acc[e["item"]["name"]][e["date"]["name"]] = e["price"]
    }
    return acc
  }, {})

dates = [...new Set(Object.keys(items).map(i => Object.keys(items[i])).flat())]

totalSumPerDate = {};

dates.forEach(date => {
  const sumOnDate = Object.values(items).reduce((acc, curr) => {
    acc = acc + (curr[date]? curr[date] : 0);
    return acc;
  }, 0);
  totalSumPerDate[[date]] = sumOnDate;
});

totalSum = Object.values(totalSumPerDate).reduce((acc, curr) => acc+curr, 0);

sumPerItem = {};

Object.keys(items).forEach(key => {
   const sum = Object.values(items[key]).reduce((acc, curr) => acc + curr, 0);
   sumPerItem[[key]] = sum;
});

并显示表格：

<table>
  <thead>
    <tr>
      <th>ITEM</th>
      {dates.map(date => <th>{date}</th>)}
      <th>TOTAL</th>
    </tr>
  </thead>
  <tbody>
  {
    Object.keys(items_dicc).map((item) => {
      return (
        <tr>
          <td>{item} // {items[item]?.description}</td>
          <td>{items[item]?.type}</td>
          {dates.map((date) => <td>{items[item][date] || ''}</td>)}
          <td>{sumPerItem[item]}</td>
        </tr>
      )
    })
  }
    <tr>
      <td>TOTAL</td>
        {Object.values(totalSumPerDate).map(item => <td>{item}</td>)}
      <td>{totalSum}</td>
    </tr>
  </tbody>
</table>

我需要添加description、type 和unit，我尝试这样做，但它给我带来了dates 中的所有内容。

如何使用上述方法修复它以正确显示表格，建议？

Answer 1

For example:

{array.map(row => <tr>
  <td>{row.id}</td>
  <td>{row.date.id}</td>
  <td>{row.date.name}</td>
</tr>)}