React TypeError 中的完整日历：无法读取未定义的属性“日历”答案

【问题标题】：Full Calendar in React TypeError: Cannot read property 'calendar' of undefinedReact TypeError 中的完整日历：无法读取未定义的属性“日历”
【发布时间】：2020-03-17 02:45:50
【问题描述】：

我在尝试存储有关所选时间的信息时遇到错误。任何帮助表示赞赏，感谢您的时间！如果你们需要更多具体信息，请告诉我。

以下是我的组件中的代码 sn-p：

  const Calendar = (props) => {

  const [startTime, setStartTime] = React.useState('');

  const handleSelect = (selectedInfo) => {
    //alert(selectedInfo.startStr);
    setStartTime(selectedInfo.startStr);
  }

  return (
    <FullCalendar 
      defaultView="timeGridWeek" 
      weekends={false} 
      allDaySlot={false}
      plugins={[ timeGridPlugin, dayGridPlugin, interactionPlugin ]} 
      minTime="08:00:00"
      selectable={true}
      selectMirror={true}
      selectOverlap={false}
      select={handleSelect}
      header={{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
      events={[
        { title: 'event 1', start: '2020-03-16 10:00:00', end: '2020-03-16 12:00:00' },
        { title: 'event 2', start: '2020-03-19' }
      ]}
    />
  );
}

【问题讨论】：

当前代码是否包含发生错误的地方？
@keikai 是的。当我尝试在 handleSelect() 方法中设置状态时发生错误。
没有看到你提到的任何错误，在线演示在这里：codesandbox.io/s/wispy-sea-vzkfr，请提供minimal reproducible example
@keikai 感谢您创建演示。请在此处查看。当我选择任何时间时，都会发生错误。 codesandbox.io/s/holy-monad-hpud5

标签： javascript reactjs fullcalendar

【解决方案1】：

将fullcalendar 和fullcalendar-react 升级到版本4.4.1 为我解决了这个问题。看来是bug。

【讨论】：

【解决方案2】：

export default class Calendar extends React.Component{
    state = {startTime: ''}

    handleSelect = (selectedInfo) => {
        //alert(selectedInfo.startStr)
        this.setState({ startTime: selectedInfo.startStr})
        console.log("working!!", this.state.startTime)
    }

    render(){
        return (
            <FullCalendar
                defaultView="dayGridMonth"
                weekends={false}
                allDaySlot={false}
                plugins={[timeGridPlugin, dayGridPlugin, interactionPlugin]}
                minTime="08:00:00"
                selectable={true}
                selectMirror={true}
                selectOverlap={false}
                select={this.handleSelect}
                header={{
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                }}
                events={[
                    { title: 'event 1', start: '2020-03-16 10:00:00', end: '2020-03-16 12:00:00' },
                    { title: 'event 2', start: '2020-03-19' }
                ]}
            />
        )
    }
}

我也有同样的问题。相同的错误信息。我一直在搜索互联网，我想出的解决方案是这样的。

【讨论】：

@Nelles 是的，它确实解决了最初问题的错误。我修改并测试了代码，它打印出了 console.log 消息。不可能的事情