Javascript 尝试访问映射的api数据并在React big calendar（ReactJS）中显示

我试图在react大日历上显示api中的数据，但似乎无法显示事件。我已经将数据映射到html表元素。如何使用映射数据查看大日历中的事件

这是我的密码：

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))
        console.log('trainings:',trainings);
    }

    const eventList = trainings.map((training) => 
      <tr key={training.id}>
        <td>{training.activity}</td>
        <td>{training.date}</td>
        <td>{training.duration}</td>
        <td>{training.customer.firstname}</td>
      </tr>
    );

    console.log('events:', eventList);

    const events = [
      {
        allDay: 'false',
        title: eventList.activity,
        start: eventList.date,
        end: eventList.date + moment().add(eventList.duration, 'minutes')
      }
  ];

    return (
        <Calendar 
        localizer={localizer}
        events={events}
        startAccessor='start'
        endAccessor='end'
        views={['month', 'day', 'week']}
        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））
console.log（“培训：”，培训）；
}
const eventList=trainings.map（（training）=>
{培训.活动}
{培训日期}
{培训时间}
{training.customer.firstname}
);
log（'events:'，eventList）；
常量事件=[
{
整天都在说：‘假’，
标题：eventList.activity，
开始：eventList.date，
结束：eventList.date+moment（）.add（eventList.duration，“分钟”）
}
];
返回(
)
}

事件应该是案例中每个培训的对象数组。您不需要创建表，而是应该映射培训数组以匹配日历事件

像这样：

Event {
  title: string,
  start: Date,
  end: Date,
  allDay?: boolean
  resource?: any,
}

在您的情况下，事件将类似于：

    const events= trainings.map((appointment)=>{
              return {
                id: training.id,
                title: training.activity,
                start: new Date(training.date),
                end: new Date(training.date),
                allDay: false
              }
            })

希望它能帮助你