如何根据ReactJS中的类别和子类别来组织列表？

如何解决如何根据ReactJS中的类别和子类别来组织列表？

我是JavaScript初学者，也是ReactJS。

我正在做练习，只是为了提高我的知识。此练习列出了投资基金。我呈现此列表并显示有关每个投资基金的一些详细信息。

我现在要尝试的是根据其各自的category和subcategory来组织此列表。在下图中的列表中显示一块，可以看到我渲染了一个列表，并且该列表中的每个项目都有一个类别和一个子类别。

我尝试使用reduce，但是我真的不明白它是如何工作的，因此我无法应用我在互联网上看到的示例。要整理列表，请使用.map()。

这是我放入codesandbox的代码

这是我用来获取列表的Gist

您能告诉我如何根据类别和子类别来组织/列出每个投资基金吗？

谢谢。

解决方法

我们可以使用Array.reduce将资金按类别或类别和子类别进行分组，这将创建以这些属性为键的对象。

一旦我们将资金按类别分组，我们只能显示给定组中的资金，例如

groups["Renda Variável"]

我们还可以使用Array.sort对任何属性（或属性组合）进行排序。

此外，如果您只想要给定类别的资金，则可以使用Array.filter，如下所示：

// Show only funds from "Estratégias Diferenciadas"
console.log("Desired category:",funds.filter(fund => fund.Category === "Estratégias Diferenciadas"));

例如（我从这里所有资金中选择了20个随机项目）：

let funds = [{"Category":"Renda Variável","SubCategory":"Valor Long Only","Name":"Normandia Institucional Fundo de Investimento em Cotas de Fundo de Investimento em Ações","Type":"Ações"},{"Category":"Renda Fixa","SubCategory":"Crédito Privado","Name":"Fundo de Investimento Vinci Renda Fixa Crédito Privado","Type":"Renda Fixa"},{"Category":"Renda Variável","SubCategory":"Valor Plus","Name":"Novus Ações Institucional Fundo de Investimento em Cotas de Fundos de Investimento em Ações","SubCategory":"Cotas de FIDCs Próprios","Name":"SRM Exodus 60 Fundo de Investimento em Cotas de Fundos de Investimento Multimercado - Créd. Priv.","Type":"Multimercado"},{"Category":"Estratégias Diferenciadas","SubCategory":"Estratégia Específica - Investimento no Exterior","Name":"Exploritas Alpha America Latina Fic de Fi Multimercado","SubCategory":"Long & Short Direcional","Name":"3R Genus Hedge Fundo de Investimento Multimercado","SubCategory":"Equity Hedge/Long Biased","Name":"NCH Maracanã Long Short Select Fundo de Investimento de Ações","Name":"Perfin Institucional Fundo de Investimento em Cotas de Fundos de Investimento em Ações","SubCategory":"Renda Fixa","Name":"Brasil Plural Yield Fundo de Investimento Renda Fixa Referenciado DI","Name":"Augme 45 Fundo de Investimento em Cotas de Fundos de Investimento multimercado Crédito Privado","Name":"Daycoval Classic Fundo de Investimento Renda Fixa Crédito Privado","Name":"BNP Paribas Match DI Fundo de Investimento Renda Fundo de Investimentoxa Referenciado Crédito Privado","SubCategory":"Direitos Creditórios","Name":"Fundo de Investimento em Direitos Créditorios TG Real","Type":"Direito Creditório"},"Name":"Leste Credit Brasil Fundo de Investimento em Cotas de Fundos de Investimento Multimercado Crédito Privado","Name":"Rio Bravo Fundamental Fundo de Investimento em Ações","Name":"NW3 Event Driven Fundo de Investimento em Cotas de Fundos de Investimento Multimercado","SubCategory":"Cotas de FIDCs Multigestor","Name":"Solis Capital Antares Crédito Privado - Fundo de Investimento em Cotas de Fundos de Investimento Multimercado - Longo Prazo","SubCategory":"Macro Valorização","Name":"Adam Macro Strategy II Fundo de Investimento em Cotas de Fundos de Investimento Multimercado","Name":"Valora Guardian Fundo de Investimento em Cotas de Fundos de Investimento Multimercado Crédito Privado","SubCategory":"Long & Short Neutro","Name":"Távola Long & Short Fundo de Investimento Multimercado","Type":"Multimercado"}]

console.log("Funds grouped by Category:",funds.reduce((groups,fund) => {
    // We use this key to group funds,we could make it anything,e.g. Name etc.
    let key = fund.Category;
    groups[key] = [...(groups[key] || []),fund];
    return groups;
},{}));

console.log("Funds grouped by Category,Subcategory:",in this case we're grouping by Category and SubCategory
    let key = fund.Category + "," + fund.SubCategory;
    groups[key] = [...(groups[key] || []),{}));

console.log("Funds sorted by Category:",[...funds].sort((a,b) => a.Category > b.Category ? 1: -1));
console.log("Funds sorted by Category,SubCategory:",b) => { 
    if (a.Category !== b.Category) { 
        return a.Category > b.Category ? 1: -1;
    }
    return a.SubCategory > b.SubCategory ? 1: -1;
}));