组件更新，但新道具不会呈现到日历事件中

Question

更新：

我也尝试使用

$('#calendar').fullCalendar({
  events: this.props.events
});

在componentDidUpdate的内部而不是代码段中显示的内容，并且会产生相同的结果（单击时没有更改）。

---

i具有呈现到DOM的父React组件，并且一个包含FullCalendar的子女反应组件。我希望日历显示动态变化事件的列表。

儿童组件将事件列表作为道具列表，该prop源自父组件的状态（在我的实际应用程序代码中，它源自Redux Store）。日历是在子组件的componentDidmount（）方法中初始化的，然后我在componentDidupDate（）中使用FullCalendar的Refetchevents功能，以便在下面的代码Snippet中尝试显示更改的事件。通过使用简单单击事件处理程序更改父组件的状态（事件列表）。但是，这似乎不起作用。

我还尝试使用" reerenderevents"而不是" refetchevents"，但无济于事。

class Application extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = { eventslist: [] };
  }
  handleClick() {
    this.setState({ eventslist: [{ id: '12345', title: 'Temp', start: '10:00:00', end: '11:50:00', dow: [1, 3, 5] }]});
  }
  render() {
    return (
      <div>
        <h1 onClick={() => this.handleClick()}>Add Test Event</h1>
        <Cal events={this.state.eventslist} />
     </div>
    );
  }
}
class Cal extends React.Component {
  componentDidMount() {
    $('#calendar').fullCalendar({
      editable: false, // Don't allow editing of events
      weekends: false, // Hide weekends
      defaultView: 'agendaWeek', // Only show week view
      header: false, // Hide buttons/titles
      minTime: '07:30:00', // Start time for the calendar
      maxTime: '22:00:00', // End time for the calendar
      columnFormat: 'ddd',
      allDaySlot: false, // Get rid of "all day" slot at the top
      height: 'auto', // Get rid of  empty space on the bottom
      events: this.props.events
    });
  }
  componentDidUpdate() {
    console.log(this.props.events);
    $('#calendar').fullCalendar('refetchEvents');
  }
  render() {
    return <div id='calendar'></div>;
  }
}
ReactDOM.render(<Application />, document.getElementById('app'));

<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" rel="stylesheet"/>
<div id="app"></app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>

任何帮助将不胜感激！

如果您想解决的话，带有相同片段的Codepen。

Answer 1

这篇文章指出了正确的方向：我决定在每个坐骑并更新时销毁并重新创建整个Fullcalendar。工作子部分看起来像这样：

class Cal extends React.Component {
  constructor(props) {
    super(props);
    this.updateEvents = this.updateEvents.bind(this);
  }
  componentDidMount() {
    this.updateEvents(this.props.events);
  }
  componentDidUpdate() {
    this.updateEvents(this.props.events);
  }
  updateEvents(eventsList) {
    console.log(eventsList);
    $('#calendar').fullCalendar('destroy');
    $('#calendar').fullCalendar({
      editable: false, // Don't allow editing of events
      weekends: false, // Hide weekends
      defaultView: 'agendaWeek', // Only show week view
      header: false, // Hide buttons/titles
      minTime: '07:30:00', // Start time for the calendar
      maxTime: '22:00:00', // End time for the calendar
      columnFormat: 'ddd',
      allDaySlot: false, // Get rid of "all day" slot at the top
      height: 'auto', // Get rid of  empty space on the bottom
      events: eventsList
    });
  }
  render() {
    return <div id='calendar'></div>;
  }
}

Answer 2

我不想使用jQuery，所以找出了其他解决方案：

class CalendarPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fullCalendar: "",
    }
    this.updateCalendar = this.updateCalendar.bind(this);
  }
  componentDidMount() {
    this.updateCalendar(this.props.tasks);
  }
  componentWillReceiveProps(nextProps){
    this.setState({fullCalendar: ""})
    this.updateCalendar(nextProps.tasks);
  }
  updateCalendar(props){
    let calendarEvents = [];
    props.forEach(function(each,index) {
      let today = new Date()
      let sevenDayAfter = new Date().setDate(new Date().getDate() + 7);
      each.dueDate > today
        ? each.dueDate > sevenDayAfter
          ? calendarEvents[index] =  {end: each.dueDate, title:each.name, start: each.taskDate, color:"blue"}
          : calendarEvents[index] =  {end: each.dueDate, title:each.name, start: each.taskDate, color:"orange"}
        : calendarEvents[index] =  {end: each.dueDate, title:each.name, start: each.taskDate, color:"red"}
    });
    const calendarOptions = Promise.resolve({
      schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      defaultView: 'month',
      defaultDate: new Date(),
      timezone: 'local',
      editable: false,
      droppable: false,
      selectable: false,
      displayEventTime : false,
      slotDuration: '00:30',
      scrollTime: '08:00',
      displayTime: true,
      firstDay: 1,
      events: calendarEvents,
    });
    calendarOptions.then(function(result){
      this.setState({fullCalendar: <FullCalendar options={result} />})
    }.bind(this))
  }
  render() {
    return (
      <div className="container" id="calendar">
        {this.state.fullCalendar}
      </div>
    )
  }
}

主要的想法是，我正在通过DOM中的状态。如果componentWillReceiveProps，状态将设置为null，并且更新功能启动并设置了一个新状态。


You need to setState to "" because its similar like code above $('#calendar').fullCalendar('destroy');

但是，如果页面刷新日历开始滚动回到顶部。有什么解决方案吗？（您无法使用event.preventdefault（））