我如何使用反应钩子构造对象数组

Question

在一个对象中我有一个名字、图片和位置 我如何将具有相同职位的人分组在一起，其中与职位相对应的名称可以在其下方突出显示

例如来自 json 文件的数据

    {
    "aspirants" : [
    {
    "position": "President",
    "name": "John",
    "photo": "https://"
    },
    {
    "position": "President",
    "name": "Smith",
    "photo": "https://"
    },
    {
    "position": "secretary",
    "name": "Felicia",
    "photo": "https://"
    },
    {
    "position": "President",
    "name": "Jane",
    "photo": "https://"
    }
    ]
    }

给这样的东西

总裁

约翰和（人物照片）

史密斯和（人像）

秘书

Felicia 和（人像）

简和（人像）

Answer 1

最好的方法可能是使用数组reduce 方法。你可以做一个这样的函数：

function groupByKey(people, key) {
  return people.reduce((peopleSoFar, currentPerson) => {
    return {
      ...peopleSoFar,
      [currentPerson[key]]: [
        ...(peopleSoFar[currentPerson[key]] || []), currentPerson
      ]
    }
  }, {});
}

然后这样称呼它：

groupByKey(data.aspirants, 'position')

这会给你这个：

{
  President: [
    { position: 'President', name: 'John', photo: 'https://' },
    { position: 'President', name: 'Smith', photo: 'https://' },
    { position: 'President', name: 'Jane', photo: 'https://' }
  ],
  secretary: [ { position: 'secretary', name: 'Felicia', photo: 'https://' } ]
}