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

如何解决减少 reactjs 中按类别区分的数组

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

array = [
  {
    "id": 1,"categoryId": 2,"period": "202101","type": "A","price": 100,"discount": 0
  },{
    "id": 2,"period": "202102","type": "B","price": 300,"discount": 20
  },{
    "id": 3,"period": "202103","price": 200,"discount": 70
  },{
    "id": 4,"period": "202104","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>
              )
            })

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

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

解决方法

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

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"],"discount": curr["discount"]
      }
}
return acc;
},{})

这种减少的结果是：

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

,

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

let array = [
  {
    id: 1,categoryId: 2,period: "202101",type: "A",price: 100,discount: 0
  },{
    id: 2,period: "202102",type: "B",price: 300,discount: 20
  },{
    id: 3,period: "202103",price: 200,discount: 70
  },{
    id: 4,period: "202104",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>