来自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
},
我有React组件
<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>
现在我有了这个结果http://i.prntscr.com/Mk3CwGzhQL2nGRW8_nZ-Cg.png
但我需要按日期对消息进行排序,因为据我所知,我需要使用moment.js解析我的数据,然后按此日期排序。我不知道该怎么做。有谁可以帮助我吗) 结果我需要按按摩日期排序http://i.prntscr.com/neLdi4r3RgS9OEfjtUJOzQ.png消息
答案 0 :(得分:2)
我会改变连接数组的方式,并使用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>
)
请注意,您的API仅返回当天,而不是当天的时间,因此除非您更改API,否则不会对消息进行排序。另外我建议API连接消息数组并对其进行排序。为了在json上写时间,我建议使用ISO8601 Date and Time Format将api中的日期和时间传递给你的应用程序
答案 1 :(得分:0)
即使没有momentjs你也可以排序。 Momentjs用于解析和格式化您提供的时间戳。
您可以使用new Date(your_time_object).getTime();
有很多方法可以实现这一点。您可以使用以下代码,例如:
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
});
}
现在在render方法
中<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>
我自己没有测试过这段代码,但这应该可行。当然,你所有的时间戳都很糟糕。它必须更加精确,如果可能的话,还有一段时间可以获得更好的结果