如何在 React 中返回没有重复的数组或求和重复的对象答案

【问题标题】：How to in React return array without duplicates or sum duplicate objects如何在 React 中返回没有重复的数组或求和重复的对象
【发布时间】：2021-06-07 17:52:24
【问题描述】：

请帮助我找到解决方案，并在我的代码重构方面有所帮助。

我只想将一些对象从一个数组放入一个新数组中，它就像一个产品购物车。这就是为什么我不想看到任何重复项，而只想看到：产品 - 模式窗口中的数量。我有两个数组：

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} 的内容。
计算重复对象并删除计数字段。

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

【问题讨论】：

有适合我的解决方案：` added = (id) => { this.setState (( { addedToCart, dataList } )=>{ // filter return an Array but // find return an元素，我们正在寻找的 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); } // 如果存在则计数 ++ else{ mainArr.find(el=> el.id===id).count++; } return{ addedToCart: mainArr } })}; `

标签： javascript arrays reactjs sorting

【解决方案1】：

根据 React 文档，setState 应该类似于：setState(updater, [callback]),

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

它应该看起来像this.setState({ state: 'something' }, () => { console.log('something') })

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

【讨论】：

【解决方案2】：

我会将count 放在产品详细信息中。此外，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
};

这样added 将检查 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 } };
  });
};

这样可以避免任何对象重复，并将购物车中的商品与产品详细信息分开。如果您需要访问产品的计数，您可以检查 this.state.addedToCart[id] 是否存在并相应地返回其 count。

基本实现示例：

【讨论】：