Javascript 如何在返回数组中无重复或求和重复对象

请帮助我找到一个解决方案，并与我的代码重构一点

我只想把一些对象从一个数组放到一个新的数组中，它就像一个产品购物车。这就是为什么我不想看到任何副本，而只想在模式窗口中看到：product-quantity。 我有两个阵列：

state = {
  existData: [
    {
      productName: "CoolProductName 1",
      count: 0,
      image: "src.jpeg",
      author: "Name Surname",
      date: "21.02.2020",
      id: 1,
    },
    {
      productName: `CoolProductName 2"`,
      count: 0,
      image: "src.png",
      author: "Name Surname",
      date: "21.02.2020",
      id: 2,
    },
  ],
  addedToCart: [],
};

因此，功能是：

added = (id) => {
  //get product Id from other component

  this.setState(({ addedToCart, existData }) => {
    let newObj = existData.filter((el) => el.id === id); // there is I get product selected by user from array of all products

    return {
      addedToCart: [...addedToCart, ...newObj],
    };
  });
};

在我所知不多的情况下，我想做如下事情：

let newObj = existData
  .filter((el) => el.id === id)
  .map((el) => {
    if (el.count >= 0) {
      el.count++;
    }
    return { ...el };
  });

是的，它使用

count++

返回值，但在

addedToCart

数组中，我得到了具有不同计数的重复对象。 我认为有两种方式：

将对象添加到购物车后，删除

addedToCart

数组中的重复项并增加计数，然后在购物车中显示类似于

{addedToCart.prductName}-{addedToCart.count}

的内容

计数重复对象并删除计数字段

---

更好的方法和合适的代码是什么？谢谢

根据React文档，setState应该是：setState（更新程序，[callback]）

如果我没有弄错的话，您正在传递一个回调来代替更新程序

它应该看起来像

this.setState（{state:'something'}，（）=>{console.log（'something'）}）

---

React不接受使用预先存在的组件名称调用新函数。

我会将

计数

与产品详细信息分开。另外，

addedToCart

将是一个对象，其中其键是带有的ID，值是

count

新的州格式：

state = {
  existData: [
    {
      productName: "CoolProductName 1",
      image: "src.jpeg",
      author: "Name Surname",
      date: "21.02.2020",
      id: 1,
    },
    {
      productName: `CoolProductName 2"`,
      image: "src.png",
      author: "Name Surname",
      date: "21.02.2020",
      id: 2,
    },
  ],
  addedToCart: {}, //store id and count here
};

这样添加的

将检查id键以更新其计数：

added = (id) => {
  //get product Id from other component
  this.setState(({ addedToCart }) => {
    const count = typeof addedToCart[id] === "undefined" ? 1 : ++addedToCart[id];
    return { addedToCart: { ...addedToCart, [id]: count } };
  });
};

这样可以避免任何对象重复，并将购物车的项目与产品详细信息分离。如果需要访问产品的计数，可以检查此.state.addedToCart[id]

是否存在，并相应地返回其计数

基本实现示例：

---

有一个适合我的解决方案：`added=（id）=>{this.setState（{addedToCart，dataList}）=>{//filter返回一个数组，但//find返回一个元素，我们通过id const newItem=dataList.find查找（el=>el.id==id）；const mainArr=[…addedToCart]；//如果购物车中没有if（mainArr.find（el=>el.id==id==undefined）{newItem.count=1；mainArr.push（newItem）；}//如果存在，则计数++其他{mainArr.find（el=>el.id==id）.count++；}返回{addedToCart:mainArr}}`