Question

我正在通过从表单中的React date-picker组件中选择日期来创建事件。我将它们显示在这样的表格中：

tableA.js

    import React, { Component } from 'react';
      class TableRow extends Component {
       render() {
        return (
         <tr>
           <td>
             {this.props.obj.event_name} 
              <br></br>
              {moment(this.props.obj.startDate).format("MMMM D, Y") 
              //startDate is of type Date 
     </td>
    </tr>
);}}

这是我从数据库中检索数组的地方。

// index.js

   componentDidMount(){
   axios.get('http://localhost:4000/event')
    .then(response => {
      this.setState({ event: response.data });
    })
    .catch(function (error) {
      console.log(error);
    })
}
 tabRow(){
  return this.state.event.map(function(object, i){
      return <TableRow obj={object} key={i} />;
  });
}

render() {
  return (
    <div>
      <table className="table table-striped" style={{ marginTop: 20 , width:700}}>
        <tbody>
          { this.tabRow() }
        </tbody>
      </table>
    </div>
  );
}

} 现在，它按创建顺序在列表中显示事件，创建的事件首先显示在表中。如何按照日期的升序对它们进行排序，以便最早显示日期的事件会首先显示？

Answer 1

如果使用getTime（）将日期转换为自1970年1月1日00:00:00以来的毫秒数，然后根据这些值对事件进行排序，则会得到所需的值。

Answer 2

首先，reverse（）会更改原始数组，因此最好将其复制然后反转。

如果数组按创建时间排序，则相反的操作将使最早创建的数组成为数组的最后一个。

第二，在数组中使用sort函数。它可以添加一个函数来定义排序方法。由于代码使用了moment（）。矩库具有isBefore函数来比较时间。

snooze

编辑：

Answer 3

很酷，只需尝试一下。...

dateArray.sort((a, b) => this.desc(a, b));


desc = (a, b) => {
		const aDate = a.date1 ? new Date(a.date1) : new Date(a.date2);
		const bDate = b.date1 ? new Date(b.date1) : new Date(b.date2);
		return bDate.getTime() - aDate.getTime();
	};

反应：如何根据日期对项目进行排序？

3 个答案:

编辑：