Lodash在反应中对数据进行排序

Question

我正在尝试根据事件的日期进行排序。我有一个按钮将按升序呈现事件，另一个按钮将按降序呈现事件。我正在使用 lodash 的 orderBy 方法。我在容器组件的状态下定义 orderDir。当按钮被点击时 orderDir 会改变。 orderBy 应该是我的数据对象的“开始”属性。我相信我可以访问它。这是我的代码：

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;

我正在控制台记录过滤的事件，这是我要排序的对象。在这里你可以看到'start'属性在哪里。

提前非常感谢！

Answer 1

对象中start 元素的值是字符串，而不是日期对象，因此将使用字符串比较而不是日期进行比较。

您可以使用以下方法将字符串转换为日期：

new Date(event.node.start)

这是 orderBy 的用法：

filteredEvents = _.orderBy(filteredEvents, (event)=>{
    return new Date(event.node.start);
}, orderDir);//order by