时间戳

首页 > 解决方案 > 按日期顺序渲染 React 组件

javascript - 按日期顺序渲染 React 组件

问题描述

我必须根据连接到日历库的日期呈现一系列事件。我正在使用 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
}

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

我怎样才能以一种干净/可扩展/时间复杂度有效的方式来解决这个问题？我尝试创建一个函数，该函数将创建一个对象，遍历排序事件数组，将其日期作为字符串用作键，并将与日期键匹配的事件数组用作值，并将其用作道具日期父组件。但是，对象键的保存顺序与它们在数组中的迭代顺序不同。这导致无序的日期/相应事件。请指教！

标签： javascriptreactjsdata-structuresreact-reduxmomentjs

解决方案

您可以使用 Array.filter 和 Array.map 的组合

const getFilteredRenderedNodes = (list) => list
  .filter(item => item.date === someDate)
  .map(item => (
    <div key={item.id}>{item.date}</div>
  ));

UsingArray.filter迭代数组并按条件查找匹配项item.date === someDate。这是一个可替换的标准，但它是您用来从列表中选择项目子集的标准。

UsingArray.map返回一个React.ReactNode由 React 解释和渲染的 jsx 数组。render 方法包​​含一个key必须唯一的字段，以便 React 知道要更新和渲染和处理事件的节点。

然后你消费：

return (
  <SomeComponent>
    {getFilteredRenderedNodes(myItemList)}
  </SomeComponent>
);

myItemList你的物品清单在哪里。

推荐阅读