Как я могу дождаться завершения запроса к Firebase и затем отобразить приложение в ReactJS?

Question

Мое приложение ReactJS получает базу данных Firebase асинхронно, но я хочу сначала загрузить базу данных, а затем отобразить приложение с базой данных. Как я могу ждать или перерисовать приложение при загрузке базы данных?

import React from 'react';
import * as firebase from "firebase/app";
import {config} from './dbinit'
import "firebase/database";

import Home from './panels/Home';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.setState = this.setState.bind(this);
        this.state = {
            activePanel: 'home',

            db: null,
            loading: true,


        };
        console.log("init");
    }

    componentDidMount = () => {
        var self = this;
        let ref = firebase
         .initializeApp(config)
         .database()
         .ref();

        ref.once("value").then(res => {
                        // Async request to Firebase
            console.log("success", res.val())
            if (res.val() != undefined){
                                        // If response not undefined then load it to 'state'
                    this.setState({db: res.val(), loading: false})

            }
        });
        console.log("after")
    }

    go = (e) => {
        this.setState({ activePanel: e.currentTarget.dataset.to })
    };
    render() {
        const { loading, db } = this.state;
        return loading ? (
            <div>loading...</div>
        ) : (
            <View activePanel={this.state.activePanel}>
                <Home id="home" fetchedUser={this.state.fetchedUser} go={this.go} db = {this.db}/>
            </View>

        );
    }
}

export default App;

В render () в 'Home' я передаю 'this.db' и пытаюсь получить его в 'Home', но там это не определено.

Answer 1

В вашей строке для рендеринга таблицы вам не нужно this.db, просто db

<Home id="home" fetchedUser={this.state.fetchedUser} go={this.go} db = {this.db}/>

должно быть просто

<Home id="home" fetchedUser={this.state.fetchedUser} go={this.go} db = {db}/>