如何按年和月对 React 数组进行排序和显示？答案

【问题标题】：How do I sort and display a React array by year and month?如何按年和月对 React 数组进行排序和显示？
【发布时间】：2017-12-07 00:33:09
【问题描述】：

我对 React 还很陌生。基本上我正在尝试为每个收据显示具有以下属性的收据表：

{
  date: '2017-07-03',
  description: 'Receipt description,
  amount: 300
}

我正在尝试将收据拆分和排序，如下所示：

2017
  July

  03 Jul | Receipt Description | £300.00
  ------ | ------------------- | -------
  01 Jul | Receipt Description | £20.00

  May

  03 May | Receipt Description | £300.00
  ------ | ------------------- | -------
  01 May | Receipt Description | £20.00

2016
  ...

我可以轻松地映射对象并按日期排序，但不知道如何将它们分成年份和月份部分。任何指导将不胜感激！

【问题讨论】：

jsfiddle.net/c7495fuq
Sort a string date array的可能重复
嗨@Chris 感谢您的帮助。我已经设法按日期对数据进行排序，但我不确定如何将其拆分为多个部分，以便我可以显示带有年份和月份的标题，然后根据我最初的帖子中的图表显示带有相应收据的表格。

标签： arrays reactjs sorting

【解决方案1】：

你可以这样做：

var sorted = data.sort(function(a, b) {
    return new Date(a.date) - new Date(b.date);
});

var byYearAndByMonth = {};

_.each(sorted, function(item) {
    var year = item.date.substring(0,4)
    var month = item.date.substring(5,7)

    if (typeof byYearAndByMonth[year] === "undefined") {
            byYearAndByMonth[year] = {};
    }

    if (typeof byYearAndByMonth[year][month] === "undefined") {
        byYearAndByMonth[year][month] = [];
    }

    byYearAndByMonth[year][month].push(item);
 });

首先对数组进行排序，然后遍历排序后的数组并按年建立对象索引。

然后要在 render() 方法中映射对象，您必须使用 Object.keys

看到这个jsfiddle

【讨论】：

谢谢@flocks！我现在已经得到了排序的输出，但是当我映射 byYearAndByMonth 时，我只能返回一个年份列表。如何获取每年的基础数据并将其传递给组件的 props？
由于月份嵌套在byYearAndByMonth 中的年份中，因此您需要在循环中创建一个循环。请参阅更新的fiddle。我会说你将整个 byYearAndByMonth 作为道具传递给你的组件，而组件内部的 render() 你在对象上循环（两次）。
@PeterSmith，我意识到在 reactjs 中渲染嵌套对象/数组对于初学者来说可能有点棘手。这是example。我希望它会有所帮助！
太棒了！谢谢你们的帮助。我想我现在已经明白了:)
我将如何按降序对数据进行排序？例如。 2017 年 - 7 月 - 6 月 - 2016 年 3 月 - 12 月 - 11 月