Reactjs NextJs/React：组织数组

我在理解如何最好地操作数组以获取所需数据时遇到了问题。根据我所做的研究，有多种方法，但我不清楚哪种方法最为优化

我想显示一个简单的列表，按国家、州、城市字母顺序排列。数组的格式如下所示：

[
 {
  id: 1,
  name: "Place 1",
  state: "Florida",
  city: "Boca Raton",
  country: "US",
 },
 {
  id: 2,
  name: "Place 2",
  state: "Florida",
  city: "Daytona Beach",
  country: "US",
 },
 {
  id: 3,
  name: "Place 3",
  state: "Kansas",
  city: "Lenexa",
  country: "US",
 },
{
  id: 4,
  name: "Place 4",
  state: "Harju",
  city: "Tallinn",
  country: "EE",
 },
]

预期结果的一个例子是：

美国 佛罗里达州

• 地点1
• 地点2

堪萨斯州

• 地点3

EE 哈尔朱

• 地点4

---

我看到很多人说要利用ES6来实现这一点，但我不确定最好的方法是什么。操纵原始数组响应？有什么方法可以循环它们吗？

这里有一种方法只需要一个循环

const data = [];
let result = {};
data.forEach(({ name, state, country }) => {
  if (!result[country]) {
    result[country] = {};
  }
  if (!result[country][state]) {
    result[country][state] = [name];
  }
  else {
    result[country] = {
      ...result[country],
      [state]: [
        ...result[country][state],
        name
      ]
    };
  }
});
console.log(result);

输出

{
  US: { Florida: [ 'Place 1', 'Place 2' ], Kansas: [ 'Place 3' ] },
  EE: { Harju: [ 'Place 4' ] }
}

我确信if-else部分可以通过使用spread操作符和操作符链删除，但我没能弄明白

如果您的环境支持操作员链接，这里有一个较小的解决方案

const data = [];
let result = {};
data.forEach(({ name, state, country }) => {
  result[country] = {
    ...result[country],
    [state]: [
      ...(result?.[country]?.[state] || []),
      name
    ]
  };
});

console.log(result);

---

最好的方法是使用简单的

.map（）

函数：）映射这个数组。我已经使用reduce对数组进行了操作，以按“状态”对它们进行排序。然后我执行了

{Object.keys（array）.map（（key）=>

，并将其循环一次以按状态排序。有没有一种方法可以在不使用.map操作原始数组的情况下执行此操作？