如何按键分组对象并修改reduce函数返回的数组？答案

【问题标题】：How do I group objects by key and modify the array the reduce function returns?如何按键分组对象并修改reduce函数返回的数组？
【发布时间】：2021-06-02 10:41:25
【问题描述】：

我使用 Redux 将我的所有产品存储在一个列表中。显示的 thist 列表如下所示：

[
  {
    "id": 1,
    "name": "BLACK TEA",
    "supplieruuid": "SLIGRO",
  },
  {
    "id": 2,
    "name": "GREEN TEA",
    "supplieruuid": "SLIGRO",
  },
  {
    "id": 3,
    "name": "PURPLE TEA",
    "supplieruuid": "BUNZL",
  },
  {
    "id": 4,
    "name": "RAINBOW TEA",
    "supplieruuid": "BUNZL",
  },
]

我正在使用这个 reduce 函数通过 supplieruuid 键将这些产品组合在一起。

export const selectSortedItems = (state) => state.entities.cart.list.reduce((hash, { ["supplieruuid"]: value, ...rest }) => ({ ...hash, [value]: (hash[value] || []).concat({ ...rest }) }), {});

这将返回这个由关键供应商uuid 分组的产品数组。

[
    {
        "SLIGRO": [
        {
            "id": 1,
            "name": "BLACK TEA",
            "supplieruuid": "SLIGRO",
        },
        {
            "id": 2,
            "name": "GREEN TEA",
            "supplieruuid": "SLIGRO",
        },
        ],
        "BUNZL": [
        {
            "id": 3,
            "name": "PURPLE TEA",
            "supplieruuid": "BUNZL",
        },
        {
            "id": 4,
            "name": "RAINBOW TEA",
            "supplieruuid": "BUNZL",
        },
        ],
    },
]

除了我需要返回如下：

 [
    {
        title: "SLIGRO",
        data: [
        {
            "id": 1,
            "name": "BLACK TEA",
        },
        {
            "id": 2,
            "name": "GREEN TEA",
        },
        ],
    },
    {
        title: "BUNZL",
        data: [
        {
            "id": 3,
            "name": "PURPLE TEA",
        },
        {
            "id": 4,
            "name": "RAINBOW TEA",
        },
        ],
    },
]

如何修改 reduce 函数以显示上述数组？添加了标题和数据。

【问题讨论】：

一个对象如何在您的预期结果中包含 2 个具有相同名称的属性 title 和 data。你无法做到这一点。
很抱歉，我刚刚更新了我的意思。我忘记关闭对象了。
this 是你的答案吗？

标签： javascript reactjs redux reduce react-redux-form

【解决方案1】：

您可以使用对象进行分组，并使用数据的不需要的属性进行解构。最后只取对象中的值。

const
    data = [{ id: 1, name: "BLACK TEA", supplieruuid: "SLIGRO" }, { id: 2, name: "GREEN TEA", supplieruuid: "SLIGRO" }, { id: 3, name: "PURPLE TEA", supplieruuid: "BUNZL" }, { id: 4, name: "RAINBOW TEA", supplieruuid: "BUNZL" }],
    result = Object.values(data.reduce((r, { supplieruuid: title, ...o }) => {
        (r[title] ??= { title, data: [] }).data.push(o);
        return r;
    }, {}));

console.log(result);

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

【讨论】：

【解决方案2】：

当你使用reduce时，你需要传递一个空的[]作为累加器。

其次，您需要搜索该元素是否存在于acc数组中。如果存在，则将对象推送到 acc 中，否则添加具有 2 个属性 title 和 data 的新对象。

const arr = [
  {
    id: 1,
    name: "BLACK TEA",
    supplieruuid: "SLIGRO",
  },
  {
    id: 2,
    name: "GREEN TEA",
    supplieruuid: "SLIGRO",
  },
  {
    id: 3,
    name: "PURPLE TEA",
    supplieruuid: "BUNZL",
  },
  {
    id: 4,
    name: "RAINBOW TEA",
    supplieruuid: "BUNZL",
  },
];

const result = arr.reduce((acc, curr) => {
  const { supplieruuid } = curr;
  const objInAcc = acc.find((o) => o.title === supplieruuid);
  if (objInAcc) objInAcc.data.push(curr);
  else acc.push({ title: supplieruuid, data: [curr] });
  return acc;
}, []);

console.log(result);

【讨论】：

【解决方案3】：

保持您的 selectSortedItems 不变，我们可以创建另一个函数来根据您的需要对其进行映射。

const selectSortedItems = (state) => {
  const sortedBySupplierUUID = state.entities.cart.list.reduce((hash, { ["supplieruuid"]: value, ...rest }) => ({ ...hash, [value]: (hash[value] || []).concat({ ...rest }) }), {});
  return Object.keys(selectSortedItems(sortedBySupplierUUID)).map(key => ({ title: key, data: sortedBySupplierUUID[key] }))};
}

【讨论】：

感谢您的回复，因为我在 useSelector 函数中使用了 const selectSortedItems 我收到错误“您必须将选择器传递给 useSelector”；
是的，抱歉@Wolf，我忘记添加你的整个状态选择器 (state.entities.cart.list)，因为我在本地进行了测试。我更新了答案，让我知道它是否有效。
你太棒了！谢谢你的帮助。成功了！