如何在 React Native 中对数组进行分组

Posted 2023-02-22

【中文标题】如何在 React Native 中对数组进行分组

【英文标题】：How to group an array within React Native

【发布时间】：2020-09-08 09:04:54

【问题描述】：

我有一个名为“目录”的对象数组，其中包括人员及其工作的列表。问题是一个人可以覆盖多个角色，我想在渲染过程中将“工作”分组到相同的“id”下。 这是我的数组：

"directory": 
[
                
      "id": 37,
      "job": "Electrician",
      "name": "Alan"
    ,
    
      "id": 32,
      "job": "Writer",
      "name": "Mark"
    ,
    
      "id": 37,
      "job": "DIY",
      "name": "Alan"
    ,
    
      "id": 134,
      "job": "Director",
      "name": "Philip"
    ,
    
      "id": 37,
      "job": "Plumber",
      "name": "Alan"
    ,
    
      "id": 85,
      "job": "Teacher",
      "name": "Oliver"
    ,
]

我想要一个新数组显示为：

Alan: Electrician, Plumber, DIY
Mark: Writer
Philip: Director,
Oliver: Teacher

我不确定我应该使用嵌套的 .map 还是 reduce。

任何帮助表示赞赏。

【参考方案1】：

您可以在 JS 中使用reduce() 来解决您的问题

let directory = [
    
        "id": 37,
        "job": "Electrician",
        "name": "Alan"
    ,
    
        "id": 32,
        "job": "Writer",
        "name": "Mark"
    ,
    
        "id": 37,
        "job": "DIY",
        "name": "Alan"
    ,
    
        "id": 134,
        "job": "Director",
        "name": "Philip"
    ,
    
        "id": 37,
        "job": "Plumber",
        "name": "Alan"
    ,
    
        "id": 85,
        "job": "Teacher",
        "name": "Oliver"
    ,
]

let newDirectory = Object.values(directory.reduce((acc, item) => 
    if (!acc[item.name]) acc[item.name] = 
        name: item.name,
        job: []
    ;
    acc[item.name].job.push(item.job);
    return acc;
, ))

console.log(newDirectory)

然后你可以使用 React-Native 中的 SectionList 来根据你的要求显示数据，或者你可以试试下面的方法，

import React,  Component  from 'react';
import  Text, View  from 'react-native';

const newDirectory = [
     name: 'Alan', job: ['Electrician', 'DIY', 'Plumber'] ,
     name: 'Mark', job: ['Writer'] ,
     name: 'Philip', job: ['Director'] ,
     name: 'Oliver', job: ['Teacher'] 
]

export default class App extends Component 
    render() 
        return (
            <View style= flex: 1, marginTop: 50 >
                
                    newDirectory.map(item => (
                        <Text>item.name: 
                            item.job.map(job => (
                                <Text>`$job, `</Text>
                            ))
                        </Text>
                    ))
                
            </View>
        );
    

希望这对您有所帮助。如有疑问，请随意。

【讨论】：

感谢您的帮助，根据需要工作。我实际上是在使用 Flatlist 来呈现项目。干杯