Javascript 响应未加载的大型日历事件

我试图在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}}
        />
    )
}

import React，{useState，useffect}来自“React”；
从“react big Calendar”导入{Calendar，momentLocalizer}
从“力矩”中导入力矩；
导入'react big calendar/lib/css/react big calendar.css'；
导出默认函数TrainingCalendar（）{
常数定位器=力矩定位器（力矩）；
const[trainings，setTrainings]=useState（[]）；
useffect（（）=>{
获得训练（）
});
常量getTrainings=（）=>{
取（'https://customerrest.herokuapp.com/gettrainings')
.then（response=>response.json（））
.然后（数据=>setTrainings（数据））
.catch（err=>console.error（err））
}
const events=trainings.map（（training）=>
训练=
{
整天都在说：‘假’，
标题：培训。活动，
开始：training.date，
结束：training.date+moment（）.add（training.duration，'分钟'），
资源：training.customer.firstname
}
);
log（'events:'，events）；
返回(
)
}

---

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

您在这里遇到了一些问题：

要使用类似componentdidmount的useeffect，请添加一个空的依赖项数组ie

useffect（（）=>{ 获得训练（） }, []);

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

 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 }}
        />
    )
}

开始：时刻（training.date）.toDate（）

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 }}
        />
    )
}

import React，{useState，useffect}来自“React”；
从“react big Calendar”导入{Calendar，momentLocalizer}
从“力矩”中导入力矩；
导入'react big calendar/lib/css/react big calendar.css'；
导出默认函数TrainingCalendar（）{
常数定位器=力矩定位器（力矩）；
const[trainings，setTrainings]=useState（[]）；
useffect（（）=>{
获得训练（）
}, []);
常量getTrainings=（）=>{
取（'https://customerrest.herokuapp.com/gettrainings')
.then（response=>response.json（））
.然后（数据=>setTrainings（数据））
.catch（err=>console.error（err））
}
const events=trainings.map（（training:any）=>
训练=
{
整天都在说：‘假’，
标题：培训。活动，
开始：时刻（training.date）.toDate（），
结束：时刻（training.date）.add（training.duration，'minutes'）.toDate（），
资源：training.customer.firstname
}
);
log（'events:'，events）；
返回(
)
}

我解决了这个问题，但你也可以试试这里写的东西

我是这样解决的：

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}}
        />
    )
}

import React，{useState，useffect}来自“React”；
从“react big Calendar”导入{Calendar，momentLocalizer}
从“力矩”中导入力矩；
导入'react big calendar/lib/css/react big calendar.css'；
导出默认函数TrainingCalendar（）{
常数定位器=力矩定位器（力矩）；
const[trainings，setTrainings]=useState（[]）；
useffect（（）=>{
获得训练（）
});
常量getTrainings=（）=>{
取（'https://customerrest.herokuapp.com/gettrainings')
.then（response=>response.json（））
.then（data=>setTrainings（data.map）（（training）=>(
{
标题：培训。活动，
开始时间：utc（培训日期）.\u d，
结束：时刻.utc（培训.日期）。添加（培训.持续时间，'minutes'）。\u d，
资源：training.customer.firstname
})
)))
.catch（err=>console.error（err））
}
返回(
)
}

你好，谢谢你的回答。不是100%确定这是否有效，因为我问了我的老师后，解决了不同的问题。是的，你的最终代码看起来和我的非常相似。仍然不确定为什么在没有依赖项数组的情况下调用useeffect？见：