如何从唯一且不重复的对象映射项目

Question

我正在制作一个电子商务 React 本机应用程序，在应用程序的 CART 部分，我希望添加到购物车中的具有相同 ID（您可以在控制台中看到的类别 ID）的每个项目只呈现一次，但在我的例子中，如果我在购物车中添加 3 个具有相同 id 的项目，我将看到 3 个不同的列表项目。如果有多个具有相同 ID 且添加数量的项目，我希望我的地图功能显示 1 个列表项目。到目前为止，我的代码只是将每个选定的产品呈现为一个单独的项目：

renderItems() {
let items = [];
this.state.cartItems.map((item, i) => {
  console.log(item)
  items.push(
    <ListItem
      key={i}
      last={this.state.cartItems.length === i + 1}
      onPress={() => this.itemClicked(item)}
    >
      <Thumbnail square style={{ width: 100, height: 100 }} source={{ uri: item.productdetail.image }} />
      <Body style={{ paddingLeft: 10 }}>
        <Text style={{ fontSize: 16 }}>

          {item.productdetail.name}

        </Text>

        <Text style={{ fontSize: 14, fontStyle: 'italic' }}>Price: {item.productdetail.price}</Text>
        <Text style={{ fontSize: 14, fontStyle: 'italic' }}>Quantity: {item.quantity > 1 ? item.quantity : 1}</Text>

      </Body>
      <Right>
        <Button style={{ marginLeft: -25 }} transparent onPress={() => this.removeItemPressed(item)}>
          <Icon size={30} style={{ fontSize: 30, color: '#95a5a6' }} name='ios-remove-circle-outline' />
        </Button>
      </Right>
    </ListItem>
  );
});
return items;}

console.log的结果如下

这是我的购物车的样子

现在您可以看到购物车应该只显示一个 listItem 具有相同产品的数量 =18

Answer 1

这种情况下，在push之前就得做一个简单的控制，item是否存在。由你来设计：

例如，您可以创建另一个包含唯一项的列表。在这样的页面中，我相信保留独特的项目很有用，您可能在其他地方也需要相关信息。而且这个列表不应该需要 setState 因为它只是为了控制。

this.state.uniqueItems = [];

在每次推送中，将项目添加到uniqueItems。这里不要使用setState，会造成冗余渲染：

this.state.uniqueItems.push(item);

在map函数中，推送之前，检查id是否存在于唯一列表中。您可以在这里使用简单的 for 循环、lodash 库或 Array 的 find 方法。

Answer 2

考虑到您有一个像这样的简单数据集：

const rawItemsData = [
    {id: 1, qty: 2},
    {id: 1, qty: 3},
    {id: 2, qty: 1},
    {id: 1, qty: 2},
    {id: 2, qty: 5},
    {id: 3, qty: 6}
];

如果你想获得一个包含唯一商品 ID 和总数量的数组，你可以使用 reduce :

const uniqueItemsData = rawItemsData.reduce((prev, item) => {
    const existingItem = prev.find(({id}) => id === item.id);
    if(existingItem)
        existingItem.qty = existingItem.qty + item.qty;
    else
        prev.push(item);
   return prev;
 }, []); //-> [ { id: 1, qty: 7 }, { id: 2, qty: 6 }, { id: 3, qty: 6 } ];


 //Then you can use your code : 
 uniqueItemsData.map((item, id) => {
     //..
 });

如何从唯一且不重复的对象映射项目

How to map items from an object that are unique and not repeating

javascript

reactjs

conditional-rendering

react-native