渲染产品按类别分组

debugcn 发表于 Dev

丹尼尔（Daniele）

晚上好，读者们！

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

就是这种情况：

listOfCategories: ["Basic", "Hardware"]

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

在我的组件的render方法内部，有：

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>
    );
}

结果是这样的：

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

基本-> item.category

开始-> item.name

娱乐-> item.name

硬件-> item.category

机顶盒-> item.name

.map（）和.filter（）函数将很有用，但是我真的不知道如何处理这种情况。

任何帮助将不胜感激！

达哥

map()而filter()在这种情况下肯定是有用的。

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>
  );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。