如何按年份和月份排序和顯示React數組？

-1

我是React的新手。基本上我試圖顯示收據的一個表，對每個接收的以下屬性：如何按年份和月份排序和顯示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 
    ...

我可以輕鬆地映射對象並按日期排序，但無法弄清楚如何將它們分成年份和月份部分。任何指導將非常感激！

來源

2017-07-03 David Simpson

https://jsfiddle.net/c7495fuq/ – Chris

可能的複製[排序字符串日期數組]（https://stackoverflow.com/questions/30691066/sort-a-string-date-array） – Chris

嗨@Chris謝謝你的幫助。我已經設法按日期對數據進行排序，但我不確定如何將它分成多個部分，以便我可以在年份和月份中顯示標題，然後根據我的初始文章中的圖表顯示帶有相應收據的表格。 –

你可以做這樣的事情：

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

來源

2017-07-03 18:13:51 flocks

謝謝@flocks！我現在得到了排序的輸出，但是當我通過YearAndByMonth映射時，我只能返回一個年份列表。我如何獲取每年的基礎數據並將其傳遞給組件的道具？ –

由於月份嵌套在'byYearAndByMonth'年，你需要在循環中做一個循環。查看更新的[小提琴]（https://jsfiddle.net/a1xzLmd5/2/）。我想說你將整個'byYararAndByMonth'作爲道具傳遞給你的組件，並且在組件的'render（）'裏面循環（兩次）在這個對象上。 – flocks

@PeterSmith，我意識到在reactjs中渲染嵌套對象/數組對於初學者來說可能有點棘手。這是一個[示例]（https://jsfiddle.net/69z2wepo/82134/）。我希望這會有所幫助！ – flocks

如何按年份和月份排序和顯示React數組？

回答

相關問題