Javascript 如何筛选从开始日期到结束日期具有给定范围的日期？

我有一个从中提取数据的API，我希望能够按照这样选择的日期数量过滤数据

这是一个

或者是否可以使用moment.js按日期过滤 我的json在以下结构中返回：

{
"id": "2",
"postUrl": "https://dogtime.com/assets/uploads/2018/10/puppies-cover-1280x720.jpg",
"profileUrl": "",
"textContent": "The post content goes here. Default allows for three lines before content is truncated. User can click in this area to expand to see the entire post…",
"likeCount": 10,
"commentCount": 10,
"username": "Rex",
"postType": "",
"platform": "INSTAGRAM",
"postTarget": "DEPARTMENT_OF_VA",
"postTopic": "customer_service",
"postDate": "2020-04-25T00:00:00",
"interaction": 10,
"sentiment": 0.5,
"hashTags": [
"22aday",
"agentorange"
]
}

我原以为这样做会奏效，但到目前为止还没有成功： 我添加了不同的处理程序，以了解选择了哪个选项，如下所示：

const handleForLastSevenDays () {
    let result = [];
    for (let i=0; i <7; i++) {
        let d = new Date();
        d.setDate(d.getDate() - i);
        result.push( (d) )
    }

    return(result.join(','));
}

const handleForLastSevenDays（）{
让结果=[]；
对于（让i=0；i您可以使用外部库，但对于我来说JS就足够了。您可以将每个日期转换为时间戳，然后使用简单的数学来筛选属于范围的日期。或者您可以比较日期字符串。这感觉很奇怪，但它们可以以相同的方式进行比较

像这样的

const handleForLastSevenDays = (currenDate) => {
  let d = new Date();
  d.setDate(d.getDate() - 7)
  let sevenDays = d.toJSON();

 return sevenDays > currenDate
}

使用带有时区的日期是最佳做法。因此，请将所有日期转换为UTC时间。
以下是您可以做到的方法


const{useState，useffect}=React；
常量getDates=（）=>[
力矩（）.减去（12，'小时'）.toDate（），
力矩（）.减去（3，'天'）.toDate（），
力矩（）.减去（10，'天'）.toDate（），
力矩（）.减去（20，'天'）.toDate（），
力矩（）.减去（45，'天'）.toDate（），
力矩（）减去（13，'月'）.toDate（）
]
常数过滤器=[{
id:1，
文字：“过去24小时”，
参数：[24，‘小时’]
},{
id:2，
文字：“过去7天”，
参数：[7，‘天’]
},{
id:3，
文字：“过去14天”，
参数：[14，‘天’]
},{
id:4，
文字：“最近30天”，
参数：[30，'天']
},{
id:5，
文字：“过去90天”，
参数：[30，'天']
},{
id:6，
文字：“过去12个月”，
参数：[12，‘月’]
}]
常量应用=（）=>{
const[dates，setDates]=useState（getDates（））
const[options，setOptions]=useState（过滤器）；
const[option，setOption]=useState（1）；
常量[Filteredates，SetFilteredates]=useState（[]）；
const onChange=（{target:{value}}）=>{
设置选项（数字（值））；
}
useffect（（）=>{
const optionObj=options.find（pr=>pr.id==option）；
const currentDate=力矩（）；
const certainDate=moment（）.subtract（optionObj.params[0]，optionObj.params[1]）；
const filteredDates=dates.filter（pr=>pr>certainDate）；
设置过滤数据项（过滤数据项）；
}，[选项]）
返回
{options.map（pr=>{pr.text}}
{filteredDates.map（日期=>{date.toString（）}）}
}
ReactDOM.render(
,
document.getElementById（'root'））
)；

似乎您只需要一个时间量（几天最简单）然后根据日期解析和日期数学筛选列表。我不确定
handleForLastSevenDays
应该做什么。@DaveNewton我添加了
handleForLastSevenDays
和其他处理程序来知道选择了哪一个。还有其他方法吗？我不知道“应该”，但所有行为都是一样的——唯一改变的是天数，这听起来更像是一个以天数为参数的单一函数。这避免了重复逻辑。如果范围列表发生变化，例如添加“Last 12 Hours”，则此方法需要修改，但只需稍加修改，例如使用小时而不是天。我可能缺少它，但这如何更新
TopPost
组件中显示的数据最重要的逻辑是在
useEffect
回调中。在这里，我获取option对象，根据其值计算过去日期并使用它o过滤器阵列您可以提供一个
代码沙盒
吗？我在插入您编写的内容和沙盒中的内容时遇到了问题。我看到了您的代码，我认为您应该将
下拉列表
顶部
组件转换为表示组件。
下拉列表
将具有
一次更改
，
选项
props和
topost
items
prop。到目前为止，您在许多地方都保持状态。