Question

我必须渲染一系列事件，这些事件基于连接到日历库的日期发生。我正在使用Redux / thunk将所有事件对象的索引带到前端。

我会根据搜索栏的值以及在日历上选择的当前日期（如下所示）过滤事件。

import moment from 'moment'

function filterEvents (events, searchValue, selectedDay) {
    const fixedSearchValue = searchValue.toLowerCase()
    const fixedSelectedDate = moment(calendarDateFormatter(selectedDay))
    return events.filter(event => {
        let eventTitle, eventDate, fixedEventDate, displayEventDate
        eventTitle = event.title.toLowerCase()
        eventDate = event.start_date
        fixedEventDate = moment(eventDate)
        displayEventDate = fixedEventDate.format("dddd, MMMM D")
        if ((searchValue === "" || eventTitle.includes(fixedSearchValue))
            && fixedEventDate.isAfter(fixedSelectedDate)) {
            event["fixedDate"] = fixedEventDate
            event["displayDate"] = displayEventDate
            return true
        } else {
            return false
        }
    })
}

function calendarDateFormatter(selectedDay) {
    return selectedDay.year + "-" + selectedDay.month + "-" + selectedDay.day
}

然后我使用以下命令按日期顺序对结果事件进行排序：

function sortEventsByDate (filteredEvents) {
    return filteredEvents.sort((event1, event2) => (
        dateComparer(event1, event2))
    )
}

function dateComparer (event1, event2) {
    let eventOneDate, eventTwoDate
    eventOneDate = event1.fixedDate
    eventTwoDate = event2.fixedDate
    return eventOneDate.isAfter(eventTwoDate) ? 1 : -1
}

我现在有一系列事件项，这些事件项是根据日期/时间排序的。然后，我尝试提取当前事件的所有唯一日期（按日期顺序），将日期呈现为父组件，该组件将按时间顺序列出与日期匹配的对应事件（作为子组件）。然后将是具有相应事件的下一个日期，依此类推。

我该如何以一种简洁/可扩展/时间复杂的高效方式进行处理？我尝试创建一个函数，该函数将创建一个对象，遍历已排序事件的数组，将其日期用作字符串作为键，并将与日期键匹配的事件数组用作值，并将其用作对日期父组件。但是，对象键的保存顺序与它们在数组中迭代的顺序不同。这导致无序的日期/相应事件。请指教！

Answer 1

您可以结合使用Array.filter和Array.map

     f"{root.data_get["FO2"]}"
                       ^
 SyntaxError: invalid syntax

使用const getFilteredRenderedNodes = (list) => list .filter(item => item.date === someDate) .map(item => ( <div key={item.id}>{item.date}</div> ));迭代数组并根据条件Array.filter查找匹配项。这是一个可替换的条件，但这是您用来从列表中选择项目子集的条件。

使用item.date === someDate返回Array.map或jsx的数组，React解释并渲染该数组。 render方法包括一个React.ReactNode字段，该字段必须唯一，以便React知道要更新，渲染和处理事件的节点。

然后使用：

key

return ( <SomeComponent> {getFilteredRenderedNodes(myItemList)} </SomeComponent> );是您的项目列表。

按日期顺序渲染React组件

1 个答案: