javascript - 如何在 React.js 中合并和复制两个数组和列表？

Question

我有两个对象数组：

const arr1 = [
{groupId: 1, name: 'group1'}, 
{groupId: 2, name: 'group2'}
]
const arr2 = [
{groupId: 1, itemId: 1, name: 'item1'}, 
{groupId: 1, itemId: 2, name: 'item2'}, 
{groupId: 1, itemId: 3, name: 'item3'}
]

我希望输出在 react.js 中是这样的列表

 1. group1
    1.1 item1
    1.2 item2
    1.3 item3
 2. group2

标签： javascriptreactjs

Answer 1

你可以这样做：

const arr1 = [
{groupId: 1, name: 'group1'}, 
{groupId: 2, name: 'group2'}
]
const arr2 = [
{groupId: 1, itemId: 1, name: 'item1'}, 
{groupId: 1, itemId: 2, name: 'item2'}, 
{groupId: 1, itemId: 3, name: 'item3'}
]

//in render function
arr1.map(arr => (
    <ListHeader title={arr.name}>
        {arr2.map(a => (
            a.groupId === arr.groupId ? <ListItem title={a.name} /> : null
        )}
    </ListHeader>    
))