反应大日历和火力基地

Question

我是 react 和 firebase 平台的新手。开发一个项目，我在后端连接中使用 react big calendar 和 firebase。 将事件从反应保存到 firebase 工作正常。现在我想从 firebase 中获取这些事件并加载到日历中。

我没有收到任何错误，但是 retrieveActiveDays fireabse 方法的控制台日志语句也没有打印出来。

不知道我哪里做错了。

  import app from 'firebase/app';
    import 'firebase/auth';
    import 'firebase/database';

    const config = {
      //firebase config is here
    };
   class Firebase {
       constructor() {
        app.initializeApp(config);
        this.auth = app.auth();
        this.db = app.database();
     }

    /*** Authentication  ***/
    
    /*** Database ***/
    user = uid => this.db.ref(`users/${uid}`);
    users = () => this.db.ref('users');


    addEvent = (uid, event) => {
        const ref2 = this.db.ref().child(`events`);
        ref2.push(event);
    }

    retrieveActiveDays = () => {
        const itemsRef = this.db.ref().child(`events`);
        console.log('##Event')
        itemsRef.on("value", (snapshot) => {
            let items = snapshot.val();
            let newState = [];
            for (let item in items) {
                newState.push({
                    id: item,
                    name: items[item].name,
                    party: items[item].party,
                    address: items[item].address /* ++++++ */
                });
            }
            console.log(items)

        });
    }

}

export default Firebase;

CalendarView 类

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import events from './events';  // This has the test data, but I want to load from firebase 
 db.
import 'react-big-calendar/lib/css/react-big-calendar.css';
import { Toolbar, Button } from "@material-ui/core";
import firebase from '../firebase';

const localizer = momentLocalizer(moment);

class CalendarView extends React.Component {

    constructor() {
        super();
        this.state = {
            items: []
        };
    }
    componentDidMount() {
        this.setState({
            items: firebase.retrieveActiveDays
        });
    }

    render() {
        return (
            <div>
                <Toolbar />
                <div style={{ height: '700pt', width: '700pt', justifyContent: 'center', }}>
                    <Calendar
                        selectable
                        events={events}
                        startAccessor="start"
                        endAccessor="end"
                        views={['month']}
                        defaultDate={moment().toDate()}
                        localizer={localizer}
                        components={{
                            event: this.state.items
                        }}
                    />
                </div>
            </div>
        );
    };
}

export default CalendarView;