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

【问题标题】：Trying to access mapped api data and show it in React-big-calendar (ReactJS)尝试访问映射的 api 数据并将其显示在 React-big-calendar (ReactJS)
【发布时间】：2020-05-11 15:07:29
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs react-big-calendar

【解决方案1】：

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

像这样：

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

希望对你有帮助！

【讨论】：