Я использую библиотеку react-big-calendar для написания календарного приложения на React. У меня возникла проблема с выделением событий, в которых найден адрес электронной почты пользователя другим цветом. Событие на текущий день выделяется корректно, но события с пользовательской почтой не выделяются как ожидается. Я уверен, что адрес электронной почты правильно находится, так как все нужные данные выводятся в консоль.
Я подозреваю, что есть какая-то ошибка в коде. Может быть, я неправильно возвращаю данные или воспринимается только один `return`. Пожалуйста, проверьте мой код и скажите, что я делаю неправильно.
```jsx
const customEventPropGetter = (event, start, end) => {
const currentUserEmail = localStorage.getItem("email");
event.participants.forEach(element => {
if (element.email === currentUserEmail) {
console.log(element);
return {
className: "participates-event",
};
}
});
const currentDate = new Date();
const currentDateFormatted = format(currentDate, "yyyy-MM-dd");
const startFormatted = format(start, "yyyy-MM-dd");
const endFormatted = format(end, "yyyy-MM-dd");
if (startFormatted === currentDateFormatted && endFormatted === currentDateFormatted) {
return {
className: "event-today",
};
}
};
```
Использую его в компоненте календаря следующим образом:
```jsx
<Calendar
localizer={localizer}
events={events}
startAccessor="start"
date={currentDate}
endAccessor="end"
selectable
eventPropGetter={customEventPropGetter}
onSelectEvent={handleEventClick}
onSelectSlot={(slotInfo) => {
setSelectedSlot(slotInfo);
openCreateEventModal();
}}
components={{
month: {
dateHeader: CustomDateHeader,
},
}}
onNavigate={(newDate) => {
setCurrentDate(newDate);
}}
/>
```
Проблема в коде заключается в неправильном использовании `return` оператора внутри цикла `forEach`.
Внутри цикла `forEach` вы вызываете `return` для каждого элемента в `event.participants`, но это не останавливает выполнение цикла или функции внутри которой он находится. Вместо этого, `return` просто прерывает текущую итерацию цикла и переходит к следующей итерации.
В результате, функция `customEventPropGetter` не возвращает ничего, если условие внутри цикла не выполняется для первого элемента в `event.participants`. Это означает, что она возвращает `undefined`, и вы не видите ожидаемого стиля для событий с пользовательской почтой.
Для исправления этой проблемы вам нужно заменить `forEach` на `find`. Функция `find` возвращает первый элемент в массиве, для которого условие выполняется, и прекращает выполнение. Таким образом, если условие внутри `find` выполняется, функция `customEventPropGetter` сразу возвращает результат.
Вот исправленный код:
```jsx
const customEventPropGetter = (event, start, end) => {
const currentUserEmail = localStorage.getItem("email");
const participant = event.participants.find(element => element.email === currentUserEmail);
if (participant) {
console.log(participant);
return {
className: "participates-event",
};
}
const currentDate = new Date();
const currentDateFormatted = format(currentDate, "yyyy-MM-dd");
const startFormatted = format(start, "yyyy-MM-dd");
const endFormatted = format(end, "yyyy-MM-dd");
if (startFormatted === currentDateFormatted && endFormatted === currentDateFormatted) {
return {
className: "event-today",
};
}
};
```
Теперь функция `customEventPropGetter` правильно возвращает объект с соответствующими классами стилей для событий с пользовательской почтой и событий текущего дня.