如何在映射函数中的同一日期创建的映射项组之前插入标题

Question

我正在尝试映射一个对象数组，如下所示：

import React from 'react';
import moment from 'moment';
const designItems = () => {
const itemsList = [
{
id: 30,
name: "Item 30",
created_at: "2020-12-09T09:23:58.936Z"
}, // etc.
];
const items = itemslist.map((item, i) => {
const monthName = moment(item.created_at, 'YYYY-MM-DDTHH:mm:ss.SSS[Z]').format('MMMM');
const yearName = moment(item.created_at, 'YYYY-MM-DDTHH:mm:ss.SSS[Z]').format('YYYY');
return (
<p key={item.id}>{item.name}</p>
);
});
return (
<div>
{items}
</div>
);
};
export default designItems;

数组itemsList按创建项目的日期降序排列(created_at(。

有没有办法在同一年和同一个月创建的每组段落之前插入一个包含monthName和yearName的标题，以便输出如下所示？

<div>
<h3>December 2020</h3>
<p>Item 30</p>
<p>Item 29</p>
<h3>November 2020</h3>
<p>Item 28</p>
<p>Item 27</p>
...
<div>

Answer 1

你好吗？

您可以创建一个按月/年对项目进行分组的结构。您可以先编写一个函数来实现这一点，然后对该结构进行迭代。例如：

function groupItemsByYearAndMonth(items) {
const grouped = {}
items.forEach(item => {
const yearName = moment(item.created_at, 'YYYY-MM-DDTHH:mm:ss.SSS[Z]').format('YYYY');
const monthName = moment(item.created_at, 'YYYY-MM-DDTHH:mm:ss.SSS[Z]').format('MMMM');
const key = `${monthName} ${yearName}`;

// if the key does not exists, we create it
if (!grouped[key]) {
grouped[key] = [];
}

grouped[key].push(item);
})
return grouped;
}

上面的函数将返回一个对象，其中键是year+month，每个键的值将是一个项目数组，例如：

{
'December 2020': [
{name: 'Item 30'},
{name: 'Item 29'},
]
'November 2020': [
{name: 'Item 28'},
{name: 'Item 27'},
]
}

现在可以使用Object.entries(groupedItems).map([yearAndMonth, items])对对象进行迭代。例如：

const App = () => {
const list = [
{
id: 1,
name: "Item 1",
created_at: "2020-12-09T09:23:58.936Z"
},
{
id: 2,
name: "Item 2",
created_at: "2020-12-08T09:23:58.936Z"
},
{
id: 3,
name: "Item 3",
created_at: "2020-11-09T09:23:58.936Z"
},
{
id: 4,
name: "Item 4",
created_at: "2020-11-08T09:23:58.936Z"
},
];
const groupedItems = groupItemsByYearAndMonth(list);
const renderItems = items => {
return items.map(item => (
<p key={item.name}>{item.name}</p>
))
}
return (
<div>
{Object.entries(groupedItems).map(([yearMonth, items]) => (
<>
<h3>{yearMonth}</h3>
{renderItems(items)}
</>        
))}
</div>
);
}

我已经创建了这个代码笔，所以你可以查看它。：(