如何在 Reactjs 中将数组从一个日期过滤到另一个日期答案

【问题标题】：How to filter array from one date to another in Reactjs如何在 Reactjs 中将数组从一个日期过滤到另一个日期
【发布时间】：2020-11-29 18:36:34
【问题描述】：

我有一个对象数组“mainData”，如下所示：

0: {date: "2020-07-25T16:44:43.000Z"
description: "Qwerty"
id: 89329972},
1: {date: "2020-07-25T16:46:28.000Z"
description: "Place bins please"
id: 65586316},
2: {date: "2020-07-25T16:49:12.000Z"
description: "Solve sewerege problem"
id: 84687816},
3: {date: "2020-07-27T16:34:47.000Z"
description: "Test compl"
id: 56437370},
4: {date: "2020-07-28T08:40:34.000Z"
description: "Sewerage problem in my area"
id: 92402221},
5: {date: "2020-09-09T11:42:18.000Z"
description: "problem"
id: 25613902},

现在我允许用户使用 mui 日期选择器从日期和到日期进行选择。这就是我接收值的方式：

fromDate: Sat Jul 25 2020 11:43:00
toDate: Sat Aug 08 2020 11:43:00

现在我想过滤从这个日期到那个日期的数组，包括从和到日期。我试图这样做，但它只返回一个空数组。我已将代码放入 useEffect 中，每次 toDate 更改时都会运行该代码，此外我还使用 Moment 使两个日期的格式相同：

 useEffect( () => {
        if (fromDate !== null && toDate !== null) {
            setReportData(
                mainData.filter(
                    (obj) =>{
                        

                        return Moment(obj.date).format("DD MMM yyyy") >= Moment(fromDate).format("DD MMM yyyy") && Moment(obj.date).format("DD MMM yyyy") <= Moment(toDate).format("DD MMM yyyy")
                    }


                )
            )

           

        }

    },[toDate])

编辑

当我选择一个日期时：

 useEffect( () => {
        if (oneDate !== null) {

            setReportData(
                mainData.filter(
                    (obj) =>{
                   

                        return new Date(obj.date.substring(0, 19)).getTime() === oneDate.getTime()
                    }


                )
            )

        }

    },[oneDate])

【问题讨论】：

标签： arrays reactjs filter datepicker

【解决方案1】：

您的对象的日期属性可以直接解析为Date 对象。那么你可以使用getTime。此外，过滤器返回 Date 对象。

所以，你可以把你的代码改成这个

 useEffect( () => {
    if (fromDate !== null && toDate !== null) {
        setReportData(
            mainData.filter(
                (obj) =>{
                    return new Date(obj.date).getTime() >= fromDate.getTime() && new Date(obj.date).getTime() <= toDate.getTime()
                }
            )
        )
    }

},[toDate])

如果您想将所有日期视为本地时区，则需要删除每个日期字符串的最后一部分，以便 parse 方法将每个字符串视为本地时区日期。

所以以前的方法变成了

 useEffect( () => {
    if (fromDate !== null && toDate !== null) {
        setReportData(
            mainData.filter(
                (obj) =>{
                    return new Date(obj.date.substring(0, 19)).getTime() >= fromDate.getTime() && new Date(obj.date.substring(0, 19)).getTime() <= toDate.getTime()
                }
            )
        )
    }

},[toDate])

【讨论】：

好哇这工作，但一个小问题，它没有返回 toDate 值的对象。尽管该日期在数组中有对象。你能告诉我为什么吗？
哪个对象和什么toDate？
例如我选择了 fromDate 25th 和 toDate 9th ，它应该返回一个大小为 6 的数组，但它返回给我一个大小为 5 的数组。您可以参考我的 qs 中的 mainData 数组。
好的，然后在 if 语句之后尝试 console.log 以查看每个属性的内容以及与过滤器的比较情况。
hmmm 我认为它与时区有关，因为 new Date("2020-07-25T16:44:43.000Z") 例如会根据您的时区返回不同的日期对象（和时间），所以也许它是正确的，因为该对象可能您的搜索条件中似乎包含时间，但转换为您当地时区的时间将超出您的日期条件范围。

【解决方案2】：

我们也可以使用 moment.js。通过将时刻转换为预期格式。

在上述情况下，我们有 Sat Jul 25 2020 11:43:00

Moment 使用llll 提供语言环境支持格式，类似对此，用法如下。在if 语句之后的顶部某处初始化格式常量；

const format = 'llll';

只需将过滤器返回语句替换为：

return Moment(obj.date, format).unix() >= Moment(fromDate, format).unix() && Moment(obj.date, format).unix() <= Moment(toDate, format).unix()

【讨论】：

当我尝试匹配单个日期时，这不起作用。
似乎后来对问题@Aldor进行了编辑。您能帮我提供oneDate 的格式输出日期吗，以便我在上面的答案中加起来以使其对功能读取有用。