主页 / coding / 问题 / 79350853
Accepted
Dglfwcfa
Asked: 2025-01-13 06:45:38 +0800 CST

将两个状态合二为一，并将内容排序到嵌套对象中

  • 772

我有两个状态，一个有类别，另一个有项目。

我所需要的是一个将两个状态结合起来的最终状态，要么将一个状态合并到另一个状态中，要么创建第三个状态。

类别状态如下所示：

{
category1: { items: [] },
category2: { items: [] }
}

第二个状态是一个项目数组，它看起来像这样：

[
{"id": "1", itemInfo: { name: "itemName", category: "category1" }},
{"id": "2", itemInfo: { name: "itemName", category: "category1" }},
{"id": "3", itemInfo: { name: "itemName", category: "category2" }},
{"id": "4", itemInfo: { name: "itemName", category: "category1" }},
{"id": "5", itemInfo: { name: "itemName", category: "category2" }},
{"id": "6", itemInfo: { name: "itemName", category: "category2" }}
]

我需要它是这样的：

{
category1: { items: [
    {"id": "1", itemInfo: { name: "itemName", category: "category1" }},
    {"id": "2", itemInfo: { name: "itemName", category: "category1" }},
    {"id": "4", itemInfo: { name: "itemName", category: "category1" }}
]},

category2: { items: [
    {"id": "3", itemInfo: { name: "itemName", category: "category2" }},
    {"id": "5", itemInfo: { name: "itemName", category: "category2" }},
    {"id": "6", itemInfo: { name: "itemName", category: "category2" }}
]}
}

请帮忙。

这是我尝试过的但没有效果的方法，它要么重复类别并最终得到 3 个“类别 1”和 3 个“类别 2”，要么新项目覆盖以前的项目。

const newFinalList = items.map((item: any) => {
    return {[item.itemInfo.category]: {items: [item]}}
}) 

setFinalState((prevObj: any) => ({ ...prevObj, ...newFinalList }))
reactjs

2 个回答

  1. Best Answer

    问题

    问题是数组映射返回一个新数组，但您想要将该数组映射到categories状态形状（即对象）。映射逻辑为源数组中的每个项目元素返回一个对象。

    const newFinalList = items.map((item: any) => {
  return {                                      // <-- new object for each item
    [item.itemInfo.category]: { items: [item] } // <-- only one item in each items array
  }
})

    解决方案

    将数组缩减为一个对象。

    例子：

    // Iterate the items array and reduce into an object
const newFinalList = items.reduce((categories, item) => {
  // If the item category object doesn't exist, create it
  // with an initially empty items array
  if (!categories[item.itemInfo.category]) {
    categories[item.itemInfo.category] = {
      items: [],
    };
  }

  // Push the current item into the items array
  categories[item.itemInfo.category].items.push(item);

  // return the categories object
  return categories;
}, {});


    const items = [
  { id: "1", itemInfo: { name: "itemName", category: "category1" } },
  { id: "2", itemInfo: { name: "itemName", category: "category1" } },
  { id: "3", itemInfo: { name: "itemName", category: "category2" } },
  { id: "4", itemInfo: { name: "itemName", category: "category1" } },
  { id: "5", itemInfo: { name: "itemName", category: "category2" } },
  { id: "6", itemInfo: { name: "itemName", category: "category2" } },
];

const newFinalList = items.reduce((categories, item) => {
  if (!categories[item.itemInfo.category]) {
    categories[item.itemInfo.category] = {
      items: [],
    };
  }
  categories[item.itemInfo.category].items.push(item);
  return categories;
}, {});

console.log({ newFinalList });

    如果您使用它来合并一些传递的 props/context 值，则将派生的“状态”也存储到 React 状态中是一种 React 反模式。要么直接计算并使用该值，要么使用钩子React.useMemo来计算并提供稳定的参考值。

    const newFinalList = React.useMemo(() => items.reduce((categories, item) => {
  if (!categories[item.itemInfo.category]) {
    categories[item.itemInfo.category] = {
      items: [],
    };
  }

  categories[item.itemInfo.category].items.push(item);
  return categories;
}, {}), [items]);
    • 3

  2. Drew 很好地指出了为什么你现有的尝试不起作用，但是如果你想合并你的第一个状态（类别），以便它包含来自你的项目状态的相应类别的项目。为此，你可以首先使你的项目状态成为一个查找映射，将项目类别映射到项目对象，然后categories通过获取它的条目并调用.map()将项目添加到每个对象来映射你的状态。然后你可以调用Object.fromEntries()将其转换回对象：

    const categories = { category1: { items: [] }, category2: { items: [] } };
const items = [ {"id": "1", itemInfo: { name: "itemName", category: "category1" }}, {"id": "2", itemInfo: { name: "itemName", category: "category1" }}, {"id": "3", itemInfo: { name: "itemName", category: "category2" }}, {"id": "4", itemInfo: { name: "itemName", category: "category1" }}, {"id": "5", itemInfo: { name: "itemName", category: "category2" }}, {"id": "6", itemInfo: { name: "itemName", category: "category2" }} ];

const itemsMap = Map.groupBy(items, o => o.itemInfo.category);
const merged = Object.fromEntries(Object.entries(categories).map(([key, val]) => [
  key,
  {...val, items: val.items.concat(itemsMap.get(key))}
]));
console.log(merged);

    • 1

相关问题