呈现按类别分组的产品 [英] Render products grouped by category

问题描述

各位读者晚上好！

我正在使用 react 和 redux 开发一个简单的购物车单页应用程序！

情况是这样的:

listOfCategories: ["基本", "硬件"]项目列表:[{字段:{类别:基本"，名称:启动器"，...},...},{字段:{类别:基本"，名称:娱乐"，...},...},{字段:{类别: "硬件",名称: "机顶盒",...},...}]

在我的组件中，在 render 方法中，有:

render() {返回 (<div><div>目录{this.props.listOfItems.map(item => (<产品id={item.fields.productexternalid}名称={item.fields.productname}category={item.fields.SKYDE_Product_Category__c}点击={() =>this.addToCart(item)}costOneTime={item.fields.baseonetimefee}costRecurring={item.fields.baserecurringcharge}合格={item.fields.eligible}可见={item.fields.visible}></产品>))}

);}

结果是这样的:

我只想渲染一个填充了类别名称的手风琴，在手风琴下按类别分组的项目:

基本 --> item.category

开始 --> item.name

娱乐 --> item.name

<小时>

硬件 --> item.category

STB --> item.name

<小时>

.map() 和 .filter() 函数会很有用，但我真的不知道如何管理这种情况.

任何帮助将不胜感激！

解决方案

map() 和 filter() 在这种情况下绝对有用.

render() {//如果未预定义listOfCategories"让 listOfCategories = listOfItems.map(item => item.fields.category)//排序并删除重复项listOfCategories = listOfCategories.sort().filter((v, i) => listOfCategories.indexOf(v) === i);返回 (<div>{listOfCategories.map(cat => (//你可能有这个 `Category` 组件<Category key={cat} name={cat} {...catProps}>{listOfItems.filter(item => item.fields.category === cat).map(item => (<产品键={item.fields.id}id={item.fields.id}名称={item.fields.name}{...itemProps}/>))}</类别>))}

);}

Good evening readers!

I'm working to a simple shopping cart single page application using react and redux!

That's the situation:

listOfCategories: ["Basic", "Hardware"]

listOfItems : [
   {
      fields: {
           category: "Basic",
           name: "Starter",
           ...
      },
      ...
   },
   {
      fields: {
           category: "Basic",
           name: "Entertainment",
           ...
      },
      ...
   },
   {
      fields: {
           category: "Hardware",
           name: "STB",
           ...
      },
      ...
   }
]

In my component, inside the render method, there is:

render() {
    return (
      <div>
        <div>
          Catalog
            {this.props.listOfItems.map(item => (
                <Product
                  id={item.fields.productexternalid}
                  name={item.fields.productname}
                  category={item.fields.SKYDE_Product_Category__c}
                  clicked={() => this.addToCart(item)}
                  costOneTime={item.fields.baseonetimefee}
                  costRecurring={item.fields.baserecurringcharge}
                  eligible={item.fields.eligible}
                  visible={item.fields.visible}
                ></Product>
              ))}
        </div>
     </div>
    );
}

The result is something like this:

I just want to render an accordion filled with the category name, items grouped by category under the accordion:

Basic --> item.category

Starte --> item.name

Entertainment --> item.name

---

Hardware --> item.category

STB --> item.name

---

.map() and .filter() function will be useful, but i don't really know how to manage this case.

Any help will be appreciated!

解决方案

map() and filter() are definitely useful in this case.

render() {
  // in case "listOfCategories" is not predefined
  let listOfCategories = listOfItems.map(item => item.fields.category)
  // sort and remove duplicates
  listOfCategories = listOfCategories.sort().filter((v, i) => listOfCategories.indexOf(v) === i);

  return (
    <div>
      {listOfCategories.map(cat => (
        // You probably had this `Category` component around
        <Category key={cat} name={cat} {...catProps}>
          {listOfItems.filter(item => item.fields.category === cat).map(item => (
            <Product
              key={item.fields.id}
              id={item.fields.id}
              name={item.fields.name}
              {...itemProps}
            />
          ))}
        </Category>
      ))}
    </div>
  );
}

这篇关于呈现按类别分组的产品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！