尝试访问映射的api数据并将其显示在React-big-calendar (ReactJS)中

Question

我试图在react-big-calendar上显示来自api的数据，但似乎无法显示事件。我已经将数据映射到一个html表元素。我应该如何使用映射数据来查看react-big-calendar中的事件？

下面是我的代码：

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

Answer 1

事件应该是一个对象数组，在您的案例中每个训练都是如此。您不需要创建一个表，而应该映射您的trainings数组以匹配Calendar events的方式。

如下所示：

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

希望能对你有所帮助！