Блог

Главная - Вопросы по программированию - Как получить ресурсы через поток json в планировщике fullcalendar react v5?

Как получить ресурсы через поток json в планировщике fullcalendar react v5?

#reactjs #fullcalendar #fullcalendar-scheduler

#reactjs #полный календарь #fullcalendar-планировщик

Вопрос:

У меня проблема с обслуживанием ресурса через канал json в планировщике fullcalendar с помощью react. Канал работает в обычном планировщике fullcalendar без react.

 import React from 'react';
import FullCalendar from '@fullcalendar/react';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import calendarInteraction from '@fullcalendar/interaction';

class Calendar extends React.Component {
    state = {};


    render() {
        return (
            <div>
                <FullCalendar
                    schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
                    plugins={[calendarInteraction, resourceTimelinePlugin]}
                    initialView={'resourceTimelineMonth'}
                    selectable={true}
                    editable={true}
                    resourceAreaWidth={'10%'}
                    resources={"localhost/resources"}
      />
            </div>
        );
    }
}
export default Calendar;

Я получаю следующую ошибку в консоли:
Предупреждение: не удается вызвать setState для компонента, который еще не смонтирован. Это не операция, но это может указывать на ошибку в вашем приложении. Вместо этого назначьте this.state напрямую или определите state = {}; свойство класса с желаемым состоянием в компоненте CalendarDataProvider.

Это похоже на проблему react, но я ее не понимаю. Где «плагин» fullcalendar react сохраняет состояние ресурсов?

Комментарии:

1. Как вы думаете, почему проблема именно в подаче ресурсов? Проблема исчезнет, если вы удалите resources={"localhost/resources"} строку?

2. Да, ошибка исчезнет, если я удалю строку ресурсов. Если я вставлю массив с ресурсами, он также отлично работает. Но канал выдает эту ошибку.

3. ОК. Я не эксперт в react (я просто хорошо разбираюсь в FullCalendar и общих материалах JS), поэтому я не знаю, связано ли это непосредственно с вашей ошибкой, но я беспокоюсь, будет ли localhost/resources правильно отображаться как URL или нет. Можете ли вы просто попробовать использовать абсолютный URL, например, http://localhost/resources (или https:// , если это то, что вы используете), чтобы исключить это как проблему? Также, пожалуйста, проверьте сетевой инструмент вашего браузера, чтобы увидеть, правильно ли выполняется запрос AJAX и получает ли он действительный ответ.

4. Также, опять же, я не специалист по React, но мне было интересно, какова цель state = {}; строки? Это не показано ни в одном из примеров на fullcalendar.io/docs/react и само по себе оно, похоже, не делает ничего полезного, просто объявляет пустой объект. Повлияет ли это на что-нибудь (хорошее или плохое), если вы удалите эту строку? Просто пытаюсь предложить вещи, которые выглядят не совсем правильно, опять же, чтобы исключить их как потенциальную проблему.

5. Маршрут localhost/resources — это просто пример. Это также работает, если я использую обычный fullcalendar v5 без react. state={} определяет начальное состояние в react. Это не имеет никакого значения, если я удалю эту строку.

Ответ №1:

Извините, я нашел ответ:

Кажется, вам нужно явно указать абсолютный URL-адрес в react fullcalendar, но версия fullcalendar без react работает также с неявными URL-адресами.

Так resources={"http://localhost/resources"} работает. И resources={"localhost/resources"} не работает!

Спасибо @ADyson, который дал ответ.