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

Question

我有一组称为“目录”的对象，其中包括人员及其工作的列表。问题是一个人可以承担多个角色，我想在渲染过程中将“工作”分组到同一个“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

我不确定是否应该使用nested .map 还是reduce。

任何帮助表示赞赏。

Answer 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>
        );
    }
}

希望这对您有帮助。如有疑问，请放心。