如何在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

我不知道我应该使用嵌套的.map还是reduce.

感谢任何帮助。

Answer 1

你可以使用 reduce() 用JS来解决你的问题

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

希望对你有所帮助。有疑惑的地方可以随时咨询。