我正在尝试根据日期按事件排序。我有一个按钮,它将按升序呈现事件,另一个按钮将按降序呈现事件。我正在使用lodash的orderBy方法。我在容器组件的状态中定义orderDir。单击按钮时,orderDir会更改。 orderBy应该是我的数据对象的'start'属性。我相信我可以访问它。这是我的代码:
import React, { Component } from 'react';
import logo from './logo.png';
import './App.css';
import EventCard from './EventCard';
import SampleData from './data/sample-data.json';
import _ from 'lodash';
let dataRaw = SampleData.data.eventSearch.edges;
let data= dataRaw;
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: {data},
defaultSortIndexes: [],
orderDir:'desc'
};
this.sortEevent = this.sortEevent.bind(this);
}
sortEevent(e, type){
if (type === 'asc'){
this.setState({ orderDir:'asc'});
}else{
this.setState({ orderDir:'desc'});
}
}
render() {
let filteredEvents = this.state.data.data;
let orderDir = this.state.orderDir;
console.log(filteredEvents);
filteredEvents = _.orderBy(filteredEvents, (event)=>{
return event['start'];
}, orderDir);//order by
let events = filteredEvents.map((event, i) =>
<EventCard
key={i}
name={event.node.title}
image={event.node.painting.images[0].thumb_url}
venue={event.node.venue.name}
tickets={event.node.tickets_available}
distance={event.distance}
date={event.node.start}
firstName={event.node.artist.first_name}
lastName={event.node.artist.last_name}
artistImage={event.node.artist.images[0].thumb_url}
/>
);//map
console.log(this.state.data)
return (
<div className="App">
<div className="header-wrapper">
<div className="logo-header">
<div className="logo-wrapper">
<img src={logo} className="App-logo" alt="logo" />
</div>
<div className="menu-wrapper">
<a>Events</a>
</div>
</div>
<div className="filters-wrapper">
<div className="filters">
<p>Search Filters:</p>
<button onClick={(e) => this.sortEevent(e, 'asc')} className="green">SORT ASCENDING</button>
<button onClick={(e) => this.sortEevent(e, 'desc')}>SORT DESCENDING</button>
</div>
</div>
</div>
<div className="EventList">
{events}
</div>
</div>
);
}
}
export default App;
我是控制台记录filteredEvents,这是我尝试排序的对象。在这里,您可以看到'start'属性的位置。
答案 0 :(得分:1)
对象中--port
元素的值是一个字符串,而不是Date对象,因此比较将使用字符串比较而不是日期来完成。
您可以使用以下方法将字符串转换为日期:
start
这里是orderBy用法:
new Date(event.node.start)