ReactJS：唯一项的数量总和

lf5gs5x2 于 12个月前发布在 React

关注(0)|答案(3)|浏览(91)

我有以下对象/数组：

[
    {
        "id": null,
        "value": "Apples",
        "label": "Apples",
        "Quantity": 1,
        "Weight": "0.075",
        "inputQuantity": "2",
        "Category": "BREAKFAST",
        "ItemCopy": 2,
        "PM": "123"
    },
    {
        "Quantity": 1,
        "value": "Apples",
        "Weight": "0.075",
        "id": null,
        "label": "Apples",
        "inputQuantity": "3",
        "Category": "BREAKFAST",
        "ItemCopy": 2,
        "PM": "123"
    },
    {
        "value": "Asparagus",
        "id": "TnwiO97ZHCsz4vl9A9OR",
        "label": "Asparagus",
        "Weight": "0.185",
        "Quantity": 1,
        "inputQuantity": "3",
        "Category": "BREAKFAST",
        "ItemCopy": 1,
        "PM": "123"
    }
]

然后，我使用以下代码将它们转换为唯一值：

function getUniqueDataCount(objArr, propName) {
    const mi = [...objArr]
    var data = [];
    objArr.forEach(function (d, index) {
      if (d[propName]) {
        data.push(d[propName]);
      }
    });
    var uniqueList = [...new Set(data)];
    var dataSet = {};
    for (var i = 0; i < data.length; i++) {
      dataSet[uniqueList[i]] = data.filter(x => x == uniqueList[i]).length;
      mi[i].ItemCopy = data.filter(x => x == data[i]).length
    }
    return mi;
  }

 useMemo(() => {
    mydata = getUniqueDataCount(daataa, 'label');
  }, [daataa])

  useMemo(() => {
    newCheck = Object.values(mydata?.reduce((acc, cur) => Object.assign(acc, { [cur?.label]: cur }), {}))
  }, [mydata])

然后，newCheck对象/数组变为：

[
    {
        "Quantity": 1,
        "value": "Apples",
        "Weight": "0.075",
        "id": null,
        "label": "Apples",
        "inputQuantity": "2",
        "Category": "BREAKFAST",
        "ItemCopy": 2
    },
    {
        "value": "Asparagus",
        "id": "TnwiO97ZHCsz4vl9A9OR",
        "label": "Asparagus",
        "Weight": "0.185",
        "Quantity": 1,
        "inputQuantity": "2",
        "Category": "BREAKFAST",
        "ItemCopy": 1
    }
]

这或多或少是我想要的，但在这个newCheck对象/数组中，它没有正确计算inputQuantity-它应该为5苹果，3芦笋。
我该如何修改它，让它为每一种独特的配料获取每一次出现的inputQuantity？

reactjs

来源：https://stackoverflow.com/questions/77299658/reactjs-sum-quantity-for-unique-items

3条答案

按热度按时间

8nuwlpux1#

您只需要使用Array.reduce方法进行有效的分组

function getUniqueDataCount(objArr, propName) {
  return objArr.reduce((c,data)=>{
       c[data[propName]] ??= {...data, inputQuantity:0};
       c[data[propName]].inputQuantity += Number(data.inputQuantity);
       return c;
  },{});
}

useMemo(() => {
    newCheck = Object.values(getUniqueDataCount(daataa, 'label'));
    console.log(newCheck)
}, [daataa])

看看这个：

const data = [
    {
        "id": null,
        "value": "Apples",
        "label": "Apples",
        "Quantity": 1,
        "Weight": "0.075",
        "inputQuantity": "2",
        "Category": "BREAKFAST",
        "ItemCopy": 2,
        "PM": "123"
    },
    {
        "Quantity": 1,
        "value": "Apples",
        "Weight": "0.075",
        "id": null,
        "label": "Apples",
        "inputQuantity": "3",
        "Category": "BREAKFAST",
        "ItemCopy": 2,
        "PM": "123"
    },
    {
        "value": "Asparagus",
        "id": "TnwiO97ZHCsz4vl9A9OR",
        "label": "Asparagus",
        "Weight": "0.185",
        "Quantity": 1,
        "inputQuantity": "3",
        "Category": "BREAKFAST",
        "ItemCopy": 1,
        "PM": "123"
    }
]

const res = data.reduce((c,data)=>{
  c[data["label"]] ??= {...data, inputQuantity:0};
  c[data["label"]].inputQuantity += Number(data.inputQuantity);
  return c;
},{});

console.log(Object.values(res))

.as-console-wrapper { max-height: 100% !important; }

赞(0）回复(0）举报 12个月前

hof1towb2#

实现这一点的一种方法是：

const getUniqueDataCount = (data, prop) => {
  const result = {}
  data.forEach(entry => {
    if (!result[entry[prop]]) {
      result[entry[prop]] = {...entry, "inputQuantity": +entry["inputQuantity"]}
    } else {
      result[entry[prop]]["inputQuantity"] += +entry["inputQuantity"]
    }
  })
  return Object.values(result)
}

输入数组将只循环一次，数量将转换为数字，以便能够对条目的值进行求和。

赞(0）回复(0）举报 12个月前

vohkndzv3#

我也面临着同样的问题，但我没有发现任何成果

赞(0）回复(0）举报 12个月前