Javascript 按obj日期反应排序数组

这是我的api数据

{
    id: '1',
    developer: {
        name: 'Michelle Stewart',
        proff: 'Account',
        shortInfo: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,',
        mail: 'michellestewart@gmail.com',
        phone: '+48 500 400 300',
        adress: '65 Lorem St, Warsaw, PL',
        company: 'Symu.co',
        isOnline: false
    },
    time: 'Today, 5:32 PM',
    devmessages: [
        {
            time: '10 April 2018',
            message: 'Lorem ipsum dolor sit amet, consectetur'
        },
        {
            time: '10 April 2018',
            message: 'Lorem ipsum dolor sit amet, consectetur'
        },
        {
            time: '10 April 2018',
            message: 'quis nostrud exercitation ullamco laboris'
        }
    ],
    usermessages: [
        {
            time: '10 April 2018',
            message: 'Oops ops)',
            user: true

        },
        {
            time: '10 April 2018',
            message: 'Hi how do you do?',
            user: true
        },
        {
            time: '10 April 2018',
            message: 'Can u test my code',
            user: true
        }
    ],
    isUnread: true
},

我有一个反应组件

<ul className="MessagesField">
                    {
                        this.props.data !== '' && this.props.data[0].devmessages.concat(this.props.data[0].usermessages).map((item, index) => {
                            return <li key={index} className={ item.user ? 'MessageFiled UserMessage' : 'MessageFiled ConversationMessage'}>
                                <div className="UserAvatar">
                                    <img src={ item.user === true ? this.setUserImg(this.state.userId) : this.setConversationsImg(this.props.data[0].id)}/>
                                </div>
                                <div className="MessageBody">
                                    <p>{item.message}</p>
                                    <span>{item.time}</span>
                                </div>
                            </li>
                        })
                    }
                </ul>

{
this.props.data！=''&&this.props.data[0].devmessages.concat（this.props.data[0].usermessages）.map（（项，索引）=>{
return

{item.message}

{item.time}

})
}

现在我有了这个结果

但我需要按日期对消息进行排序，因为我知道我需要用moment.js解析到日期的数据，然后按这个日期进行下一次排序。我不知道怎么做。有人能帮我吗

---

因此，我需要按消息的日期对消息进行排序

即使没有momentjs，您也可以进行排序。Momentjs用于解析和格式化您给出的时间戳。 您可以使用

newdate（您的时间对象）将时间转换为整数

有很多方法可以实现这一点。您可以将以下代码用于eg：

const getAllMessages = () => {
   let all_messages = [...this.props.data[0].devmessages, ...this.props.data[0].usermessages];
   all_messages = all_messages.map(messages => {
       message.new_time = new Date(message.time).getTime();
   }).sort((first_value, second_value) => {
       return first_value.new_time - second_value.new_time;
   });

   this.setState({ 
       all_messages
   });
}

现在进入渲染方法

<ul className="MessagesField">
    {this.state.all_message.length && this.state.all_message.map((item, index) => {
       return ( 
           <li key={index} className={ item.user ? 'MessageFiled UserMessage' : 'MessageFiled ConversationMessage'}>
             <div className="UserAvatar">
                 <img src={ item.user === true ? this.setUserImg(this.state.userId) : this.setConversationsImg(this.props.data[0].id)}/>
             </div>
             <div className="MessageBody">
                 <p>{item.message}</p>
                 <span>{item.time}</span>
              </div>
          </li>
       );
    })}
 </ul>


{this.state.all_message.length&&this.state.all_message.map（（项，索引）=>{
报税表（

{item.message}

{item.time}

);
})}


我自己还没有测试过这段代码，但应该可以。当然，你们所有的时间戳都是smae。它必须更精确，如果可能的话还需要一段时间才能得到更好的结果
即使没有momentjs，你也可以排序。Momentjs用于解析和格式化您给出的时间戳。
您可以使用
newdate（您的时间对象）将时间转换为整数

有很多方法可以实现这一点。您可以将以下代码用于eg：

const getAllMessages = () => {
   let all_messages = [...this.props.data[0].devmessages, ...this.props.data[0].usermessages];
   all_messages = all_messages.map(messages => {
       message.new_time = new Date(message.time).getTime();
   }).sort((first_value, second_value) => {
       return first_value.new_time - second_value.new_time;
   });

   this.setState({ 
       all_messages
   });
}

现在进入渲染方法

<ul className="MessagesField">
    {this.state.all_message.length && this.state.all_message.map((item, index) => {
       return ( 
           <li key={index} className={ item.user ? 'MessageFiled UserMessage' : 'MessageFiled ConversationMessage'}>
             <div className="UserAvatar">
                 <img src={ item.user === true ? this.setUserImg(this.state.userId) : this.setConversationsImg(this.props.data[0].id)}/>
             </div>
             <div className="MessageBody">
                 <p>{item.message}</p>
                 <span>{item.time}</span>
              </div>
          </li>
       );
    })}
 </ul>


{this.state.all_message.length&&this.state.all_message.map（（项，索引）=>{
报税表（

{item.message}

{item.time}

);
})}


我自己还没有测试过这段代码，但应该可以。当然，你们所有的时间戳都是smae。它必须更精确，如果可能的话，还需要一段时间才能获得更好的结果
我会改变连接数组的方式，并使用array.sort对消息进行排序：

[ ...this.props.data[0].devmessages, ...this.props.data[0].usermessages]
.sort( (a, b) => new Date(b.time) - new Date(a.time) )
.map( item => (
  <li key=...................... /li>
)

[…this.props.data[0].devmessages，…this.props.data[0].usermessages]
.sort（（a，b）=>新日期（b.time）-新日期（a.time））
.map（项目=>(

)

请注意，您的API只返回一天，而不是一天中的时间，因此除非您更改API，否则消息不会被排序。此外，我建议API连接消息数组并对其进行排序。要在json上写入时间，我建议使用将日期和时间从API传递到您的应用程序更改连接数组的方式，并使用array.sort对消息进行排序：

[ ...this.props.data[0].devmessages, ...this.props.data[0].usermessages]
.sort( (a, b) => new Date(b.time) - new Date(a.time) )
.map( item => (
  <li key=...................... /li>
)

[…this.props.data[0].devmessages，…this.props.data[0].usermessages]
.sort（（a，b）=>新日期（b.time）-新日期（a.time））
.map（项目=>(

)

请注意，您的API只返回一天，而不是一天中的时间，因此除非您更改API，否则不会对消息进行排序。此外，我建议API连接消息数组并对其进行排序。要在json上写入时间，我建议使用将日期和时间从API传递到应用程序可能重复的