Отрисовка компонентов React по дате - PullRequest
Новая
       65

Отрисовка компонентов React по дате

0 голосов
/ 20 июня 2020

Мне нужно отобразить серию событий, происходящих на основе даты, связанной с библиотекой календаря. Я использую 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
}

Теперь у меня есть массив элементов событий, которые отсортированы по дате / времени. Затем я попытался извлечь все уникальные даты для текущих событий (в порядке даты), отобразить дату как родительский компонент, который будет перечислять соответствующие события (в качестве дочерних компонентов), которые соответствуют дате в порядке времени. Тогда это будет следующее свидание с соответствующими событиями и т. Д.

Как я могу go об этом *1012* сделать это чисто / масштабируемым / эффективным способом? Я попытался создать функцию, которая будет создавать объект, выполнять итерацию по массиву отсортированных событий, использовать его дату в виде строки в качестве ключей и массив событий, которые соответствуют ключу даты в качестве значений, и использовать это в качестве реквизита для родительский компонент даты. Однако ключи объекта не сохраняются в том же порядке, в котором они были повторены в массиве. Это приводит к неупорядоченным датам / соответствующим событиям. Посоветуйте, пожалуйста!

1 Ответ

0 голосов
/ 20 июня 2020

Вы можете использовать комбинацию Array.filter и Array.map 

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 возвращает массив React.ReactNode или jsx, который React интерпретирует и отображает. Метод рендеринга включает поле key, которое должно быть уникальным, чтобы React знал, какой узел обновлять, рендерить и обрабатывать события.

Затем вы используете: 

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

Где myItemList это ваш список предметов.

...