坚持尝试使用 React 过滤 json 对象中的日期

Question

我正在使用 React，我需要有关过滤 JSON 对象中日期的最佳方法的建议，该对象是从对 API 的 fetch 调用中填充的。

我有一个日期范围选择器组件，它使用所选日期设置状态。在页面加载时，数据被填充到 HTML 表格中，当用户从日期范围选择器中选择所选日期并单击过滤器按钮时，我需要使用所选日期范围之间的结果更新 html 表格。

我的构造函数具有起始状态：

this.state = {
  bookings: {},
  selectionRange : {
    startDate: new Date(),
    endDate: new Date(),
    key: "selection"
  }
}

我的日期按钮来过滤日期，我尝试将日期从字符串转换为有效日期。

onbuttonsubmit()  {
  var options = { year: 'numeric', month: 'long', day: 'numeric' };
  console.log("Testing:", new Date(this.state.bookings.FromDate).toLocaleDateString([],options));
}
     
<button onButtonSubmit={this.onbuttonsubmit}>Filter Dates</button>

我附上了一张显示预订{} json 的图片：

Answer 1

由于您的预订对象中的FromDate 是一个字符串并且过滤器的类型为Date，因此您可以执行以下操作，前提是您要基于FromDate 进行搜索：

 onbuttonsubmit = () =>  {
    this.setState( { bookings : this.state.bookings.filter( book => new Date(book.FromDate).getTime() >= this.state.startDate.getTime() && new Date(book.FromDate).getTime() <= this.state.endDate.getTime())});
}