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

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

javascript reactjs react-native

Javascript 如何从唯一且不重复的对象映射项目,javascript,reactjs,react-native,conditional-rendering,Javascript,Reactjs,React Native,Conditional Rendering,我正在制作一个电子商务react原生应用程序，在该应用程序的购物车部分，我希望购物车中添加的每个项目都具有相同的ID（您可以在控制台中看到的categoryID），仅呈现一次，但在我的情况下，如果我在购物车中添加3个具有相同ID的项目，我将看到3个不同的受尊敬项目的列表项目。如果有多个具有相同id且添加了数量的项目，我希望我的映射函数显示1个列表项目。到目前为止，我的代码只是将每个选定的产品作为一个单独的项目呈现： renderItems() { let items = []; this.sta

我正在制作一个电子商务react原生应用程序，在该应用程序的购物车部分，我希望购物车中添加的每个项目都具有相同的ID（您可以在控制台中看到的categoryID），仅呈现一次，但在我的情况下，如果我在购物车中添加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;}

renderItems（）{
设项目=[]；
this.state.cartItems.map（（项目，i）=>{
console.log（项目）
推(
this.itemClicked（item）}
>
{item.productdetail.name}
价格：{item.productdetail.Price}
数量：{item.Quantity>1？item.Quantity:1}
此.removieTempressed（项目）}>
);
});
返回项目；}

console.log的结果如下

这就是我的购物车的样子

现在，正如您所看到的，购物车应该只显示一个具有相同产品且数量为18的listItem。在这种情况下，您必须在推送之前进行简单的控制，无论该项目是否存在。由您自行设计：

例如，您可以创建另一个包含唯一项的列表。在这样一个页面中，我相信保存独特的项目是有用的，您可能还需要其他地方的相关信息。这个列表不需要setState，因为它只是用于控件

this.state.uniqueItems = [];

在每次推送中，将项目添加到uniqueItems。不要在此处使用setState，因为它将导致冗余渲染：

this.state.uniqueItems.push(item);

在映射功能中，在按下之前，检查id是否存在于唯一列表中。您可以在此处使用简单的for循环、lodash库或数组的find方法。

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

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) => {
     //..
 });

根据数据的

id

筛选数据，然后使用prev.find（{id}=>id==item.id）中的

map

迭代内容；，我将在“id”中得到什么？此行使用对象分解

find

将循环遍历现有项并执行回调。在此回调中，变量

id

将保存当前项

id

property的值。简单地说，您还可以编写：

prev.find（（testItem）=>testItem.id==item.id）你编辑了我的答案，这使得它不那么可读，所以我拒绝了编辑。但是，是的，我想你是对的。我有一个类型错误：“undefined不是一个对象（testItem.productDetail）”