Javascript 我如何等待Firebase请求完成，然后在ReactJS中呈现应用程序？

我的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;

---

在“Home”中渲染时，我传递“this.db”并尝试在“Home”中获取它，但它没有定义。

在用于渲染表的行中，您不需要这个.db，只需要db即可

应该是

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

---

没问题！记住，如果答案解决了你的问题，就要标明答案是正确的。

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