Javascript React-在每月部分中对消息进行排序

我正在尝试将邮件列表分组到每月的部分中。每次月份更改时，我都要添加一个标题

上个月

，然后显示该月份的所有消息

以下是我的尝试：

MessageList.js

import React from "react"

export default class MessageList extends React.Component {
  constructor() {
    super()
  }

  render() {

      var currentDate = new Date()
      var currentMonth = currentDate.getMonth()
      var timeline=""

      var mssgTypeList = {
        "this_month" : [],
        "last_month" : [],
        "previous_month" : []
       }

       this.props.messages.forEach(function(message,index){
          var date = message.date.substring(0, 10)
          var time = message.date.slice(12)

          var messageDate = new Date(date)
          var messageMonth = messageDate.getMonth()

          if(currentMonth == messageMonth) {
            timeline == 'this_month'
          } else if(currentMonth == messageMonth + 1){
            timeline = 'last_month'
          } else if(currentMonth == messageMonth + 2) {
            timeline = 'previous_month'
          }

          mssgTypeList[timeline].push(message);

       });

       const ThisMonthMessageList = mssgTypeList["this_month"].map((message) => {
          var date = message.date.substring(0, 10);
          var time = message.date.slice(12);

            return (
                <li className="list-group-item" key={message.id}>
                  Date: {date} <br></br>
                  Time: {time} <br></br>
                  Body: {message.body}
                </li>
            )
       });

       const LastMonthMessageList = mssgTypeList["last_month"].map((message) => {
          var date = message.date.substring(0, 10);
          var time = message.date.slice(12);

            return (
                <li className="list-group-item" key={message.id}>
                  Date: {date} <br></br>
                  Time: {time} <br></br>
                  Body: {message.body}
                </li>
            ) 
       })

      const PreviousMonthMessageList = mssgTypeList["previous_month"].map((message) => {
          var date = message.date.substring(0, 10);
          var time = message.date.slice(12);

            return (
                <li className="list-group-item" key={message.id}>
                  Date: {date} <br></br>
                  Time: {time} <br></br>
                  Body: {message.body}
                </li>
            ) 
      })

      return (
          <div id="messageList">

            <h2>This Month</h2>
            <ul className="list-group this-month-group">
              {ThisMonthMessageList}
            </ul>

            <h2>Last Month</h2>
            <ul className="list-group last-month-group">
              {LastMonthMessageList}
            </ul>

            <h2>Previous Month</h2>
            <ul className="list-group previous-month-group">
              {PreviousMonthMessageList}
            </ul>
          </div>
         )
       }

从“React”导入React
导出默认类MessageList扩展React.Component{
构造函数（）{
超级（）
}
render（）{
var currentDate=新日期（）
var currentMonth=currentDate.getMonth（）
var timeline=“”
变量mssgTypeList={
“本月”：[]，
“上个月”：[]，
“上个月”：[]
}
this.props.messages.forEach（函数（消息、索引）{
var date=message.date.substring（0,10）
var time=message.date.slice（12）
var messageDate=新日期（日期）
var messageMonth=messageDate.getMonth（）
如果（currentMonth==messageMonth）{
时间线==“本月”
}else if（currentMonth==messageMonth+1）{
时间线='上个月'
}else if（currentMonth==messageMonth+2）{
时间线='上个月'
}
mssgTypeList[timeline]。推送（消息）；
});
const ThisMonthMessageList=mssgTypeList[“this_month”].map（（message）=>{
var date=message.date.substring（0,10）；
var time=message.date.slice（12）；
返回(

日期：{Date}


时间：{Time}


正文：{message.Body}

)
});
const LastMonthMessageList=mssgTypeList[“上个月”].map（（消息）=>{
var date=message.date.substring（0,10）；
var time=message.date.slice（12）；
返回(

日期：{Date}


时间：{Time}


正文：{message.Body}

) 
})
const PreviousMonthMessageList=mssgTypeList[“上一个月”].map（（消息）=>{
var date=message.date.substring（0,10）；
var time=message.date.slice（12）；
返回(

日期：{Date}


时间：{Time}


正文：{message.Body}

) 
})
返回(
这个月

{ThisMonthMessageList}

上个月

{LastMonthMessageList}

上月

{上一个月的消息传道者}

)
}

这里的问题是，它只生成有限数量的每月节；基本上是我在

mssgTypeList

中硬编码的节。它不会在每月更改时动态创建新节

如何在每月发生变化时动态生成新的分区

---

或者有没有其他方法可以在每月的部分中对邮件进行排序？也许可以创建其他组件？

您的思路是正确的。请注意

{ThisMonthMessageList}

不是硬代码，但您可以构建它。您可以对整个消息列表执行相同的操作。然后，您的

render

return语句将如下所示：

  return (
      <div id="messageList">
        {messageList}
      </div>
  ); 

返回(
{messageList}
); 

---

希望这足以让您正确地思考这个问题。

最好将所有依赖于props的逻辑放在

componentWillReceiveProps

方法中，同样的逻辑应该出现在

componentDidMount

函数中，因为没有调用

componentWillReceiveProps

初始时间。由于渲染称为任何状态更改，因此在渲染中包含所有这些逻辑也是非常昂贵的

可以通过以下方式实现动态渲染，但是如果将月份和年份作为键，效果会更好

导出默认类MessageList扩展React.Component{
构造函数（）{
超级（）；
此.state={
msgTypeList：{
}
}
}
componentDidMount（）{
var currentDate=新日期（）
var currentMonth=currentDate.getMonth（）
var messageTypeList={}
this.props.messages.forEach（（消息，索引）=>{
var date=message.date.substring（0,10）
var messageDate=新日期（日期）
var messageMonth=messageDate.getMonth（）；
messageTypeList[messageMonth]。推送（消息）；
})
this.setState（{messageTypeList}）；
}
组件将接收道具（下一步）{
var currentDate=新日期（）
var currentMonth=currentDate.getMonth（）
var timeline=“”
var messageTypeList={}
nextrops.messages.forEach（（消息，索引）=>{
var date=message.date.substring（0,10）
var messageDate=新日期（日期）
var messageMonth=messageDate.getMonth（）；
messageTypeList[messageMonth]。推送（消息）；
})
this.setState（{messageTypeList}）；
}
render（）{
返回(
{Object.keys（this.state.messageTypeList）.map（（key）=>{
返回(
{key}

{this.state.messageTypeList[key].map（（message）=>{
var date=message.date.substring（0,10）；
var time=message.date.slice（12）；
返回(