Question

我正在这样的js文件的表中显示事件：

 // index.component.js

import React, { Component } from 'react';
import axios from 'axios';
import TableRow from './TableRow';
import moment from 'moment';
export default class Index extends Component {

constructor(props) {
  super(props);
  this.state = {event: []};
}
componentDidMount(){
  axios.get('http://localhost:4000/event')
    .then(response => {
      this.setState({ event: response.data });

    })
    .catch(function (error) {
      console.log(error);
    })
}


tabRow(){
  var events = this.state.event
  events.sort((a,b) => {return new Date(a.startDate) - new 
Date(b.startDate)} ) ;
  return events.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>
  );
}

}

My table.js

// TableRow.js


class TableRow extends Component {
constructor(props) {
    super(props);
 }

render() {
return (

    <tr>
      <td>
        {this.props.obj.event_name} 
      </td>
      <td>{ moment(this.props.obj.startDate).format("MMMM D, Y") }</td>
      <td>
        <button onClick={this.delete} className="btn btn- 
      danger">Delete</button>
      </td>
     </tr>
     );
     }
      }
   export default TableRow;

现在，我正在使用事件的排序功能（如您在上面提供的代码中所见），可以根据日期对事件进行排序，最早的事件是列出的第一个事件。一切正常。我想过滤数组，以使已经过去的事件不会出现在我的最终表中。如何将其与当前日期进行比较并过滤掉旧事件？

Answer 1

您需要从事件日期中减去当前日期，并检查它是否小于0。如果是，则为过去，您可以忽略它。因此，过滤器功能应如下所示：

const dates = ["2018-09-12", "2018-10-18", "2018-12-30"];
const filteredDates = dates.filter(d => new Date(d) - new Date() > 0);

这就是您的情况：

events = events.filter(a => new Date(a.startDate) - new Date > 0);

反应：如何根据日期过滤事件

1 个答案: