反应，排序和对象数组（减少和映射？）

Posted 2023-02-22

【中文标题】反应，排序和对象数组（减少和映射？）

【英文标题】：React, ordering and array of objects (reduce and map?)

【发布时间】：2019-02-09 11:43:55

【问题描述】：

问题如下：(https://codesandbox.io/s/8p21n6p09l)

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

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;
            , [])

达到预期结果的最佳方法是什么？

【参考方案1】：

如果这不是一个理论编程问题，我认为最好的方法是使用 lodash 或类似的 _.groupBy。有时不需要重新发明***。

【讨论】：

好吧，我承认这是可笑的最简单的订购方式！我不知道为什么我没有想到 Lodash！谢谢你，但是......仍然有一个我想要映射（）的对象，所以我应该首先使用 Object.keys 但结果只是像 thematicArea 的名称，没有任何进一步的数据连接到每个。我该如何处理这个问题？

看看 lodash 文档，很容易找到以舒适的方式执行复杂操作的方法。您可以简单地迭代对象键并保留您想要保留的内容 _.pick()

【参考方案2】：

我有一个最后带有对象或数组的示例。

这是你想要的吗？

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"]
  ,
];

// If you want the values in an object
const retObject = modules.reduce((tmp, x) => 
  if (!tmp[x.thematicArea]) 
    tmp[x.thematicArea] = [x.name];
   else 
    tmp[x.thematicArea].push(x.name);
  

  return tmp;
, );

console.log('Value as object -----');
console.log(retObject);

// If you want the values in array
const retArray = Object.values(retObject);

console.log('Value as array -----');
console.log(retArray);

【参考方案3】：

你可以这样使用，最终输出应该是object而不是array。

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"]
    
];



let result = modules.reduce((obj, val) => 
    obj[val.thematicArea] = obj[val.thematicArea] || [];
    if (obj[val.thematicArea].indexOf(val.name) == -1)
        obj[val.thematicArea].push(val.name);
    return obj;
, );


console.log(result);

【讨论】：

但是我需要映射这个对象。我不能使用 Object.keys，因为它会丢失所有连接到每个元素的进一步数据（结果只有 Topic 1、Topic 2、Topic3 没有任何数据连接）。