减少reactjs中按类别区分的数组

Question

我正在用 reactjs 开发一个应用程序，我有数组：

array = [
  {
    "id": 1,
    "categoryId": 2,
    "period": "202101",
    "type": "A",
    "price": 100,
    "discount": 0
  },
    {
    "id": 2,
    "categoryId": 2,
    "period": "202102",
    "type": "B",
    "price": 300,
    "discount": 20
  },
  {
    "id": 3,
    "categoryId": 2,
    "period": "202103",
    "type": "B",
    "price": 200,
    "discount": 70
  },
    {
    "id": 4,
    "categoryId": 2,
    "period": "202104",
    "type": "A",
    "price": 100,
    "discount": 50
  },
]

我需要减少它以将其显示为表格：

我做了什么来显示每个时期的价格细节：

  const items = array.reduce((acc, e) => {
    if (!acc[e["categoryId"]]) {
      acc[e["categoryId"]] = {
        [e["period"]]: e["price"]
      }
    } else {
      acc[e["categoryId"]][e["period"]] = e["price"]
    }
    return acc
  }, {})

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

thead:

  <tr>{dates.map(date => <th>{date}</th>)}</tr>      

tbody:

Object.keys(items).map((item) => {
              return (
                <tr>
                  <td>{item}</td>
                  {periods.map((period) => <td>{items[item][period] || ''}</td>)}
                </tr>
              )
            })

但它只显示每个period 的price。我还需要显示discount 和type。

需要什么改动，有什么建议吗？

Answer 1

我想我没有很好地理解您的需求， 但这是我根据您的描述所做的：

array.reduce((acc, curr) => {
if (!acc[curr["categoryId"]]) {
  acc[curr["categoryId"]] = {
    [curr["period"]]: { 
        "price": curr["price"],
        "type": curr["type"],
        "discount": curr["discount"]
      }
  }
} else {
  acc[curr["categoryId"]][curr["period"]] = { 
        "price": curr["price"],
        "type": curr["type"],
        "discount": curr["discount"]
      }
}
return acc;
}, {})

而这个reduce的结果是：

{
"2": {
    "202101": {
        "price": 100,
        "type": "A",
        "discount": 0
    },
    "202102": {
        "price": 300,
        "type": "B",
        "discount": 20
    },
    "202103": {
        "price": 200,
        "type": "B",
        "discount": 70
    },
    "202104": {
        "price": 100,
        "type": "A",
        "discount": 50
    }
 }
}

Answer 2

您正在寻找的是对数组中的项目进行分组并显示它们。：

let array = [
  {
    id: 1,
    categoryId: 2,
    period: "202101",
    type: "A",
    price: 100,
    discount: 0
  },
  {
    id: 2,
    categoryId: 2,
    period: "202102",
    type: "B",
    price: 300,
    discount: 20
  },
  {
    id: 3,
    categoryId: 2,
    period: "202103",
    type: "B",
    price: 200,
    discount: 70
  },
  {
    id: 4,
    categoryId: 2,
    period: "202104",
    type: "A",
    price: 100,
    discount: 50
  }
];

let dates = array.map((e) => <th>{e.period}</th>);
let prices = array.map((e) => <td>{e.price}</td>);
let discounts = array.map((e) => <td>{e.discount}</td>);
let types = array.map((e) => <td>{e.type}</td>);

function App() {
  return (
    <div className="App">
      <table>
        <tr>{dates}</tr>
        <tr>{prices}</tr>
        <tr>{discounts}</tr>
        <tr>{types}</tr>
      </table>
    </div>
  );
}
ReactDOM.render(<App/>,document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>