反应大日历事件未加载

Question

我正在尝试在 react-big-calendar 上显示来自 api 的事件，但由于某种原因，这些事件没有显示在日历上。我让事件得到控制台，但它们没有出现在日历中。 这是我的 Calendar.js 组件：

import React, { useState, useEffect } from 'react';
import { Calendar, momentLocalizer} from 'react-big-calendar'
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';

export default function TrainingCalendar() {
    const localizer = momentLocalizer(moment);

    const [trainings, setTrainings] = useState([]);

    useEffect(() => {
      getTrainings()
    });

    const getTrainings = () => {
      fetch('https://customerrest.herokuapp.com/gettrainings')
        .then(response => response.json())
        .then(data => setTrainings(data))
        .catch(err => console.error(err))
    }

    const events = trainings.map((training) => 
        training =
        {
          allDay: 'false',
          title: training.activity,
          start: training.date,
          end: training.date + moment().add(training.duration, 'minutes'),
          resource: training.customer.firstname
        }
    );
    console.log('events:', events);

    return (
        <Calendar 
        localizer={localizer}
        events={events}
        allDayAccessor='allDay'
        titleAccessor='title'
        resourceAccessor='resource'
        startAccessor='start'
        endAccessor='end'
        views={['month', 'week', 'day']}
        style={{height: 450}}
        />
    )
}

我应该怎么做才能显示事件？

Answer 1

这里有几个问题：

1. 要使用像componentdidmount这样的useeffect添加一个空的依赖数组ie。

   useEffect(() => { 获取培训（） }, []);

2. 事件结束和事件开始应该是日期而不是字符串，因此请执行以下操作：

   开始：时刻(training.date).toDate()，

3. Moment add 不像 javascript 中的数学运算符那样工作，因此该行应该类似于：

       end: moment(training.date).add(training.duration, 'minutes').toDate(),
   

所以所有的代码看起来都是这样的：

 import React, { useState, useEffect } from 'react';
import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';

export default function TrainingCalendar() {
    const localizer = momentLocalizer(moment);

    const [trainings, setTrainings] = useState([]);

    useEffect(() => {
        getTrainings()
    }, []);

    const getTrainings = () => {
        fetch('https://customerrest.herokuapp.com/gettrainings')
            .then(response => response.json())
            .then(data => setTrainings(data))
            .catch(err => console.error(err))
    }

    const events = trainings.map((training: any) =>
        training =
        {
            allDay: 'false',
            title: training.activity,
            start: moment(training.date).toDate(),
            end: moment(training.date).add(training.duration, 'minutes').toDate(),
            resource: training.customer.firstname
        }
    );
    console.log('events:', events);

    return (
        <Calendar
            localizer={localizer}
            events={events}
            allDayAccessor='allDay'
            titleAccessor='title'
            resourceAccessor='resource'
            startAccessor='start'
            endAccessor='end'
            views={['month', 'week', 'day']}
            style={{ height: 450 }}
        />
    )
}

Answer 2

我解决了，但你也可以试试 viet-teach 在这里写的内容。

我是这样解决的：

import React, { useState, useEffect } from 'react';
import { Calendar, momentLocalizer} from 'react-big-calendar'
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';

export default function TrainingCalendar() {
    const localizer = momentLocalizer(moment);

    const [trainings, setTrainings] = useState([]);

    useEffect(() => {
      getTrainings()
    });

    const getTrainings = () => {
      fetch('https://customerrest.herokuapp.com/gettrainings')
        .then(response => response.json())
        .then(data => setTrainings(data.map((training) =>(
            {
              title: training.activity,
              start: moment.utc(training.date)._d,
              end: moment.utc(training.date).add(trainings.duration, 'minutes')._d,
              resource: training.customer.firstname
            })
          )))
        .catch(err => console.error(err))
    }

    return (
        <Calendar
        localizer={localizer}
        events={trainings}
        resourceTitleAccessor='resource'
        startAccessor='start'
        endAccessor='end'
        views={['month', 'week', 'day']}
        style={{height: 450}}
        />
    )
}