Question

我正在使用地图在我的应用中呈现列表op产品。像这样：

<div className={`content ${isLoading ? 'is-loading' : ''}`}>
  <div className="panel">
    {!isLoading && orders.length > 0
      ? orders.map((order, index) => {
          const { productname, image, quantity, orderid, category } = order;
          return (
            <div className="product" key={orderid}>
              <div className="plaatjediv" onClick={this.toggleModal.bind(this)}>
                <img
                  className="img-responsive"
                  data-itemIndex={index}
                  src={image}
                />
              </div>
              <div className="productInfo">
                <p>{productname}</p>
                <p>Aantal: {quantity}</p>
              </div>
              <div className="bdone">
                <button
                  className="btn btn-lg btn-default btndone"
                  data-itemIndex={index}
                  onClick={this.handleDoneAction}
                >
                  Done
                </button>
              </div>
            </div>
          );
        })
      : null}
  </div>
</div>;

状态订单加载了这段代码：

fetch('http://localhost:54408/api/orders/all/testing-9!8-7!6/' + todayy)
  .then(response => response.json())
  .then(parsedJSON =>
    parsedJSON.map(product => ({
      productname: `${product.ProductName}`,
      image: `${product.Image}`,
      quantity: `${product.Quantity}`,
      category: `${product.Category}`,
      orderid: `${product.OrderId}`,
    }))
  )
  .then(orders =>
    this.setState({
      orders,
      isLoading: false,
    })
  )
  .catch(error => console.log('parsing failed', error));

现在我想按类别对产品进行分组并输出如下：

 - <h3>category 1</h3>
    - image - productname - quantity
    - image - productname - quantity
 - <h3>category 2</h3>
   - image - productname - quantity
   - image - productname - quantity

等等

我不知道如何按类别对我的产品进行分组，并按类别显示它们，类别名称为每个产品组的标题。我希望有人可以帮助我。

更新

我设法将数组分组到

但我无法使用地图或其他内容进行渲染。

类别名称仅适用于现在的数字，但稍后可能会出现这种情况。

Answer 1

您可以在呈现数据之前按categoryId对数据进行分组

groupBy = (data, key) {
  return data.reduce(function(acc, item) {
    (acc[item[key]] = acc[item[key]] || []).push(item);
    return acc;
  }, {});
};
renderData() {
   const data = this.groupBy(this.state.orders, 'category');
   return Object.keys(data).map(objKey => <React.Fragment key={objKey}>{
       <h3>{objKey}</h3>
       {data[objKey].map(order => <ul>
           <li>{order.image}</li>
           <li>{order.Quantity}</li>
           <li>{order.ProductName}</li>
        </ul>) }
   }</React.Fragment>)
}
render() {
    <div>{this.renderData()}</div>
}

Answer 2

您的第一步是使用What is the most efficient method to groupby on a JavaScript array of objects?或lodash groupBy等内容对数据进行分组。

您的数据将如下所示：

const data = [{
  category: 'category1',
  orders: [
    {productname: 'pn1', image: 'img1', quantity: 1, orderid: 'ord1'},
    {productname: 'pn2', image: 'img2', quantity: 2, orderid: 'ord2'}
  ]
}, {
  category: 'category2',
  orders: [
    {productname: 'pn3', image: 'img3', quantity: 1, orderid: 'ord3'},
    {productname: 'pn4', image: 'img4', quantity: 2, orderid: 'ord4'},
    {productname: 'pn5', image: 'img5', quantity: 2, orderid: 'ord4'},
  ]
}];

然后，您可以在渲染方法中使用两个嵌套.map：

render() {
  return Object.keys(data).map(cat => (
    <div>
      <h3>{cat}</h3>
      {data[cat].map(ord => (
        <div>
          <div>{ord.productname}</div>
          <div>{ord.image}</div>
          <div>{ord.quantity}</div>
          <div>{ord.orderid}</div>
        </div>
      ))}
    </div>
  ))
}

Reactjs objectlist groupby和map

2 个答案: