FullCalendar с ReactJS: передача данных в Modal по событию EventClick: «Не удается прочитать свойство undefined» - PullRequest
Новая
       39

FullCalendar с ReactJS: передача данных в Modal по событию EventClick: «Не удается прочитать свойство undefined»

0 голосов
/ 10 июля 2019

У меня есть приложение стека MERN, использующее плагин FullCalendar (я знаю, я прошу его смешивать jQuery с React, но, увы, я новичок и сильно отстаю от крайнего срока).

Я хочу, чтобы пользователь щелкнул по событию в календаре и увидел модал с этой конкретной информацией о событиях.

Проблема в том, что я не могу получить доступ к информации о конкретных событиях из плагина FullCalendar eventClick. Консоль сообщает мне, что не может прочитать свойство undefined.

Можно ли получить доступ к этим данным в модале? Я не на 100% уверен в том, как плагин анализирует данные, которые передаются через состояние, так что, может быть, в этом проблема? Или, может быть, я упускаю возможность связать?

Если я установлю состояние на 

- - - - - - - - - - - - - - - - - - - - -
event: {title: '', start: new Date()}
- - - - - - - - - - - - - - - - - - - - -

, а затем (в FullCalendar) 

- - - - - - - - - - - - - - - - - - - - -
events={[{ title: "Event 1", date: "2020-01-01" }
- - - - - - - - - - - - - - - - - - - - -

У меня нет проблем с доступом к названию события, как это 

- - - - - - - - - - - - - - - - - - - - -
{this.state.event.title}
- - - - - - - - - - - - - - - - - - - - -

Но когда я устанавливаю состояние на 

- - - - - - - - - - - - - - - - - - - - -
event: []
- - - - - - - - - - - - - - - - - - - - -

и используйте запрос axios.get для установки состояния для ответа db, подобного этому 

- - - - - - - - - - - - - - - - - - - - -
axios.get('/events')
  .then(response => {
    this.setState({event: response.data})
})
- - - - - - - - - - - - - - - - - - - - -

и установить (в FullCalendar) 

- - - - - - - - - - - - - - - - - - - - -
events={this.state.event}
- - - - - - - - - - - - - - - - - - - - -

Календарь отображается правильно, но когда я пытаюсь получить доступ к заголовку 

- - - - - - - - - - - - - - - - - - - - -
{this.state.event.title}
- - - - - - - - - - - - - - - - - - - - -

не может прочитать свойство undefined.

Если я пытаюсь {this.state.calendarEvents [0] .title}, он возвращает заголовок только первого объекта события в БД. Я думаю, это потому, что calendarEvents - это объект js, содержащий все объекты событий в БД. К сожалению, я не знаю, как решить эту проблему.

Я пытался использовать eventSource в FullCalendar для подачи данных календаря, но понял, что передаваемые мной данные - это объект js, а не канал json. Я полагаю, что у FullCalendar есть метод для парсинга этого объекта в правильные данные при рендеринге календаря, но я не уверен, как это мне поможет. 


    import React from "react";
    import FullCalendar from "@fullcalendar/react";
    import dayGridPlugin from "@fullcalendar/daygrid";
    import timeGridPlugin from "@fullcalendar/timegrid";
    import interactionPlugin from "@fullcalendar/interaction";
    import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
    import axios from 'axios';
    import "../main.scss";

    import "@fullcalendar/core/main.css";
    import "@fullcalendar/daygrid/main.css";
    import "@fullcalendar/timegrid/main.css";


    export default class CalendarView extends React.Component {
      calendarComponentRef = React.createRef();

      state = {
        modal: false,
        calendarWeekends: true,
        event: []
      };

    componentDidMount() {
        axios.get('/events')
          .then(response => {
            this.setState({event: response.data})
            console.log({calendarEvents: response.data})
          })
          .catch(function (error) {
            console.log(error);
          })
      }

      toggle = () => {
        this.setState({ modal: !this.state.modal });
      };

      handleEventClick = ({ event, el }) => {
        this.toggle();
        this.setState({ event });
      };

      render() {
        return (
          <div className="cal-container">
            <div style={{marginTop: 30}}>
              <FullCalendar
                defaultView="timeGridDay"
                header={{
                  left: "prev,next today",
                  center: "title",
                  right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
                }}
                plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                ref={this.calendarComponentRef}
                weekends={this.state.calendarWeekends}
                events={this.state.event}
                eventClick={this.handleEventClick}
                nowIndicator='true'
                height='parent'
              />
              <Modal
              isOpen={this.state.modal}
              toggle={this.toggle}
            >
              <ModalHeader toggle={this.toggle}>
                EVENT TITLE SHOULD GO HERE: {this.state.event.title}
              </ModalHeader>
              <ModalBody>
                <div>
                  EVENT INFO SHOULD GO HERE: {this.state.event.start}
                </div>
              </ModalBody>
              <ModalFooter>
                <Button color="primary">Do Something</Button>{" "}
                <Button color="secondary" onClick={this.toggle}>
                  Cancel
                </Button>
              </ModalFooter>
            </Modal>
            </div>
          </div>
        );
      }
    }

Я ожидаю, что модал покажет заголовок EVENT, ДОЛЖЕН ИДЕТ ЗДЕСЬ: Событие 1, но вместо этого оно прерывается, и консоль говорит: «Не удается прочитать свойство 'title' of undefined"

Любой совет, понимание, руководство очень ценится.

Если вы дочитаете до конца, я уже благодарен за ваше время. Спасибо!

...