我有以下对象/数组:

[
    {
        "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])

然后,新的Check对象/数组变为:

[
    {
        "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.

我如何修改它,以便 for each 唯一的配料获得每次出现的inputQuantity?

推荐答案

你只需要使用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; }

Reactjs相关问答推荐

在迁移到Redux—Toolkit 2.0和Redux5.0之后,我在extraReducer和Slice方面有点挣扎,

从`redux—thunk`导入thunk `在stackblitz中不起作用

Redux向后端发送请求时出现钩子问题

为什么安装FLOBIT后,所有的输入FIELD现在都有一个蓝色的轮廓?

Reaction Axios多部分/表单-数据数组不工作

UseEffect和useSelector的奇怪问题导致无限循环

在REACT-RUTER-DOMV6中使用通用页面包装组件有问题吗?

React:关于useEffect钩子如何工作的困惑

在数组对象内的数组上进行映射

子路径上未定义useMatches句柄

为什么我得不到我想要的数据?

为什么我的react 简单计时器项目不起作用?

在React中使用if条件时如何更改Tailwind中元素的文本 colored颜色

react :输入失go 焦点,输入一个字符,

在Vite React上获取Amplify的环境变量

即使配置了 webpack.config.js,html-loader 也不起作用

当 React 中的状态发生变化时如何停止重新加载谷歌 map ?

next js 13 在获取中使用标头时动态渲染而不是静态渲染?

需要帮助在 document.queryselector 的 nextjs 页面上插入 useEffect 状态

当状态改变时如何执行一些动作,但只针对第一次更新?