React: Uncaught Invariant Violation: объекты недопустимы как дочерний элемент React - PullRequest
Новая
       21

React: Uncaught Invariant Violation: объекты недопустимы как дочерний элемент React

0 голосов
/ 17 марта 2020

Я создаю простой календарь реагирования с использованием полного календаря и API календаря Google, использую следующие официальные документы полную документацию по календарю , вот официальная демонстрация живая демонстрация

Вот функциональный компонент 

import React, { useState, useEffect, useContext, useRef } from 'react';
import { Calendar as FullCalendar } from '@fullcalendar/core';
import googleCalendarPlugin from '@fullcalendar/google-calendar';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

const Calendar = () => {
    const [calendar, setCalendar] = useState('');
    const calendarRef = useRef('');

    useEffect(() => {
        if (calendarRef.current) {
             console.log(calendarRef);
            setCalendar(new FullCalendar(calendarRef.current, {
                plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, googleCalendarPlugin],
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,listYear'
                  },              
                googleCalendarApiKey: 'MYKEY',
            }));        
        }
    }, [calendarRef.current]);

    // console.log(calendar);

    return (
        <div>
            <h1>Jestm Calendar</h1>
            <div ref={calendarRef}>{calendar}</div>

        </div>
    )
}


export default Calendar;

Теперь, когда я запускаю свое приложение, я получаю следующую ошибку Uncaught Invariant Violation: Objects are not valid as a React child, что я делаю не так?

1 Ответ

1 голос
/ 18 марта 2020

Проблема в том, что вы пытаетесь распечатать каталог объектов FullCalendar в render. 

 return (
        <div>
            <h1>Jestm Calendar</h1>
            <div ref={calendarRef}>{calendar && calendar.render ? calendar.render() : null}</div>

        </div>
    )
...