Javascript 对象的反应、排序和排列（减少和映射？）

问题如下：（）

我有一个对象数组（称为模块），看起来像：

const modules = [
  {
    thematicArea: "Topic 1",
    id: 1,
    name: "Budowanie postawy asertywnej",
    details: [
      "Czym jest asertywność?",
      "Asertywny Asertywny menedżer – charakterystyczne zachowania"
    ]
  },
  {
    thematicArea: "Topic 2",
    id: 2,
    name: "Asertywne narzędzia",
    details: [
      "Asertywna odmowa – zastosowanie trzyetapowej procedury",
      "Technika „Zdartej płyty”",
      "Wyrażanie pochwał i próśb"        ]
  },
  {
    thematicArea: "Topic 3",
    id: 3,
    name: "Lorem ipsum 1",
    details: ["Coś się wymyśli", "Żeby nie było tak łyso"]
  },
  {
    thematicArea: "Topic 3",
    id: 4,
    name: "Lorem ipsum 2",
    details: [
      "Wyczesane szkolenia",
      "Naprawdępowinieneś wrzucić to do koszyka",
      "Na co czekasz - dodaj!"
    ]
  },
  {
    thematicArea: "Topic 3",
    id: 5,
    name: "Ipsum Lorem",
    details: ["Och", "Ach"]
  },
  {
    thematicArea: "Topic 3",
    id: 6,
    name: "Ipsum Lorem 1",
    details: ["Och", "Ach"]
  },
  {
    thematicArea: "Topic 3",
    id: 7,
    name: "Ipsum Lorem 2",
    details: ["Och", "Ach"]
  },

这个数组从App.js传递到thmaticArea.jsx组件。问题是，我改变了显示数据的想法，希望按主题区域对数据进行分组，所以看起来像：

Topic 1: 
 - Name 1
 - Name 2
 - Name 6
 - ...
Topic 2:
 - Name 3
 - Name 5
Topic 3:
- Name 4
and so on.

每个名称都是唯一的，只能有一个主题区域（主题），但一个主题区域（主题）可以有多个名称（名称1、名称2…）

我认为我应该先使用reduce（）方法，然后使用.map（），但我已经尝试了多种方法，但都不管用。Reduce（）方法正在创建没有长度的数组。。。这就是我尝试在App.js中使用reduce实现它并将其作为“模块”传递给thematicArea.jsx组件的方式：

modules={this.state.modules.reduce(function(groups, item) {
              const val = item["thematicArea"];
              groups[val] = groups[val] || [];
              groups[val].push(item);
              return groups;
            }, [])}

---

实现预期结果的最佳方法是什么？

我有一个例子，结尾是一个对象或数组

这是你想要的吗

const模块=[{
主题领域：“主题1”，
id:1，
名称：“Budowanie postawy asertywnej”，
详情：[
“Czym是在开阿塞蒂瓦诺奇的玩笑吗？”，
“Asertywny Asertywny menedżer–性格风格扎乔瓦尼亚”
]
},
{
主题领域：“主题2”，
id:2，
名称：“Asertywne narzędzia”，
详情：[
“Asertywna odmowa–zastosowanie trzyetapowej程序”，
“Technika”Zdartej płyty“，
“怀拉阿尼·波切瓦·普罗布”
]
},
{
主题领域：“主题3”，
id:3，
名称：“Lorem ipsum 1”，
详情：[“Cośsięwymyśli”，“Żeby nie było takłyso”]
},
{
主题领域：“主题3”，
id:4，
名称：“Lorem ipsum 2”，
详情：[
“Wyczesane szkolenia”，
“Naprawdępowinieneśwrzucićto do koszyka”，
“纳科·泽卡斯-多达杰！”
]
},
{
主题领域：“主题3”，
id:5，
名称：“Ipsum Lorem”，
详情：[“Och”、“Ach”]
},
{
主题领域：“主题3”，
id:6，
名称：“益智1号”，
详情：[“Och”、“Ach”]
},
{
主题领域：“主题3”，
id:7，
名称：“Ipsum Lorem 2”，
详情：[“Och”、“Ach”]
},
];
//如果需要对象中的值
const retObject=modules.reduce（（tmp，x）=>{
如果（！tmp[x.Thematic Area]）{
tmp[x.thematicArea]=[x.name]；
}否则{
tmp[x.thematicArea].push（x.name）；
}
返回tmp；
}, {});
log（'Value as object-----'）；
console.log（retObject）；
//如果需要数组中的值
const retArray=Object.values（retObject）；
log（'Value as array-----'）；
控制台日志（重新排列）如果这不是一个理论编程问题，我认为最好的方法是使用lodash或类似公司的u.groupBy。有时不需要重新设计方向盘。
您可以用这种方式使用，最终输出应该是
object
not
array
。
const模块=[{
主题领域：“主题1”，
id:1，
名称：“Budowanie postawy asertywnej”，
详情：[
“Czym是在开阿塞蒂瓦诺奇的玩笑吗？”，
“Asertywny Asertywny menedżer–性格风格扎乔瓦尼亚”
]
},
{
主题领域：“主题2”，
id:2，
名称：“Asertywne narzędzia”，
详情：[
“Asertywna odmowa–zastosowanie trzyetapowej程序”，
“Technika”Zdartej płyty“，
“怀拉阿尼·波切瓦·普罗布”
]
},
{
主题领域：“主题3”，
id:3，
名称：“Lorem ipsum 1”，
详情：[“Cośsięwymyśli”，“Żeby nie było takłyso”]
},
{
主题领域：“主题3”，
id:4，
名称：“Lorem ipsum 2”，
详情：[
“Wyczesane szkolenia”，
“Naprawdępowinieneśwrzucićto do koszyka”，
“纳科·泽卡斯-多达杰！”
]
},
{
主题领域：“主题3”，
id:5，
名称：“Ipsum Lorem”，
详情：[“Och”、“Ach”]
},
{
主题领域：“主题3”，
id:6，
名称：“益智1号”，
详情：[“Och”、“Ach”]
},
{
主题领域：“主题3”，
id:7，
名称：“Ipsum Lorem 2”，
详情：[“Och”、“Ach”]
}
];
让结果=模块。减少（（obj，val）=>{
obj[val.thematicArea]=obj[val.thematicArea]| |[]；
if（obj[val.thematicArea].indexOf（val.name）=-1）
对象[val.thematicArea].push（val.name）；
返回obj；
}, {});
控制台日志（结果）但是我需要映射这个对象。我不能使用Object.keys，因为它会丢失连接到每个元素的所有其他数据（结果只有主题1、主题2、主题3没有任何数据连接）。好吧，我承认这是可笑的最简单的排序方式！我不知道为什么我没有想到洛达斯！谢谢你，但是。。。仍然有一个我想要映射（）的对象，所以我应该首先使用object.keys，但结果只与thematicArea的名称相似，没有任何进一步的数据连接到每个对象。我该如何处理这个问题呢？看看lodash文档，很容易找到以舒适的方式进行复杂操作的方法。您可以简单地迭代对象键，并使用u.pick（）保留想要保留的内容