React Big Calendar (w / Typescript) не показывает события

Я пытаюсь использовать React Big Calendar с машинописным текстом. После прочтения документации я могу отобразить сам календарь (установка высоты очень важна!), Однако я не могу отобразить какие-либо события. Я вижу, что массив событий, который у меня есть, заполняется правильно, и это код, который я взял из примеров и сделал его дружественным к TS, а также для useState. Прочитав другие ответы, я также убедился, что проверил аксессоры, но это не повлияло на то, был он определен или нет.

Для всего, что связано с Typescript, что я сделал, его источник находится здесь: https://github.com/DefinentyTyped/DefinentyTyped/blob/master/types/react-big-calendar/react-big-calendar-tests.tsx

Вот как я показываю свой компонент:

import React from 'react';
import moment from 'moment'
import { momentLocalizer } from 'react-big-calendar';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import SelectableCalendar from './SelectableCalendar';

const localizer = momentLocalizer(moment);

export default function Availability() {

    return (
      <div style={{ height: "100vh" }}>
        <SelectableCalendar localizer={localizer} />
      </div>
    );
  }

Вот и сам мой компонент:

import React, { useState } from 'react'
import { Calendar, View, DateLocalizer } from 'react-big-calendar'
import moment from 'moment';

const allViews: View[] = ['agenda', 'day', 'week', 'month'];

interface Props {
    localizer: DateLocalizer;
}

class CalendarEvent {
    title: string;
    allDay: boolean;
    start: Date;
    end: Date;
    desc: string;
    resourceId?: string;
    tooltip?: string;

    constructor(_title: string, _start: Date, _endDate: Date, _allDay?: boolean, _desc?: string, _resourceId?: string) {
        this.title = _title;
        this.allDay = _allDay || false;
        this.start = _start;
        this.end = _endDate;
        this.desc = _desc || '';
        this.resourceId = _resourceId;
    }
  }


export default function SelectableCalendar ({ localizer }: Props) {
    const [events, setEvents] = useState([] as CalendarEvent[]);

    const handleSelect = ({ start, end }) => {
        const title = window.prompt('New Event name')

        if (title) {
            let newEvent = {} as CalendarEvent;
            newEvent.start = moment(start).toDate();
            newEvent.end = moment(end).toDate();
            newEvent.title = title;

            events.push(newEvent)
            setEvents(events)
        }
      }

    return (
      <>
        <div>
          <strong>
            Click an event to see more info, or drag the mouse over the calendar
            to select a date/time range.
          </strong>
        </div>
        <Calendar
          selectable
          localizer={localizer}
          events={events}
          defaultView='month'
          views={allViews}
          defaultDate={new Date(2020, 4, 21)}
          onSelectEvent={event => alert(event.title)}
          onSelectSlot={handleSelect}
          startAccessor='start'
          endAccessor='end'
          titleAccessor='title'
        />
      </>
    )
  }

Что мне не хватает?


reactjs typescript react-big-calendar
person Bill Sambrone    schedule 21.05.2020    source источник
comment
почему не new CalendarEvent(?   -  person xadm    schedule 22.05.2020
comment
потому что я новичок в этом и не знал, что вы можете это сделать :)   -  person Bill Sambrone    schedule 22.05.2020
comment
это из того же источника:]   -  person xadm    schedule 22.05.2020

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что вы изменяете свое состояние, а затем устанавливаете его. React не распознает изменение (так как вы уже внесли его в состояние напрямую) и, следовательно, не выполняет повторный рендеринг компонента.

Это можно исправить, установив новое состояние непосредственно с изменениями, а именно:

    if (title) {
        let newEvent = {} as CalendarEvent;
        newEvent.start = moment(start).toDate();
        newEvent.end = moment(end).toDate();
        newEvent.title = title;

        // Erroneous code:
        //     events.push(newEvent)
        //     setEvents(events)
        setEvents([
          ...events,
          newEvent
        ])
    }

Вот игровая площадка с вашим кодом и указанным выше исправлением, которое показывает, что это работает: https://codesandbox.io/s/currying-bush-2c3hc?file=/src/App.tsx

person Moshe Jonathan Gordon Radian    schedule 24.05.2020