React Big Calendar (w/Typescript) 未显示事件

Question

我正在尝试将 React Big Calendar 与打字稿一起使用。阅读文档后，我能够显示日历本身（设置高度非常重要！），但是我无法显示任何事件。我看到我拥有的事件数组正在正确填充，这是我从示例中获取的代码，并使它对 TS 友好，也适用于 useState。通过阅读其他答案，我还确保检查了访问器，但无论是否定义它都没有影响。

对于我所做的与 Typescript 相关的任何事情，它的来源在这里：https://github.com/DefinitelyTyped/DefinitelyTyped/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'
        />
      </>
    )
  }

我错过了什么？

Answer 1

问题是你正在改变你的状态然后设置它。 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

React Big Calendar (w/Typescript) 未显示事件

React Big Calendar (w/Typescript) not showing events

typescript

reactjs

react-big-calendar