Почему firebase не распознает мой экземпляр firebase? "вызвать Firebase App.intializeApp ()"

Question

У меня есть два файла: App.js, где я настраиваю свой React Navigation StackNavigator вместе с моим экземпляром Firebase, и Login.js, где я регистрирую пользователей.

Я пытаюсь определить, вошел ли пользователь в систему (через постоянный вход в систему firebase), но по какой-то причине мой экземпляр firebase не обнаруживается в Login.js componentDidMount(). Это не имеет смысла для меня, потому что где-то в моем Login.js я вызываю fxns на своем экземпляре Firebase, как вход в систему с помощью Google.

Как мне организовать проверку инициализации / аутентификации firebase, чтобы гарантировать правильное определение экземпляра firebase вместе с постоянной проверкой подлинности?

Я уже рассмотрел этот вопрос , но у этого человека, похоже, другая проблема, поскольку он касается только экземпляра firebase в одном файле .

Соответствующие порции App.js

import { StackNavigator } from 'react-navigation';
import * as firebase from 'firebase';
import 'firebase/firestore';
import Login from './components/login';

const Application = StackNavigator({
    Login: { screen: Login,
        navigationOptions: {
                title: 'Login',
        }
    },
    SignUp: { screen: SignUp,
        navigationOptions: {
           title: 'Signup',
         }
    },
    Home: { screen: Home,
        navigationOptions: {
           title: 'Home'
       }
    },
});

const firebaseConfig = {
    apiKey: "APIKEY",
    authDomain: "AUTH_DOMAIN",
    databaseURL: "DATABASE_URL",
    projectId: "PROJECT_ID",
    storageBucket: "BUCKET",
}

export default class App extends React.Component {
    componentDidMount(){
        //if no instance exists, initialize one
        if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
        }
    }
    render() {
        return (
            <Application/>
        );
    }
}

Соответствующая часть Login.js

import * as firebase from 'firebase';
import Home from './home';

export default class Login extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            isLoggingIn: true,
            authFlag: false,
        }
    }

    componentDidMount() {
        //error is on the following line
        firebase.auth().onAuthStateChanged((user) => {
            if(!this.state.authFlag){
                this.setState({ authFlag: true })
                //persistent success, take user to Home
                if(user){
                     this.props.navigation.navigate('Home');
                     return;
                }

                //user hasn't logged in before, must log in
                else{
                     this.setState({isLoggingIn: false});
                     return;
                }
            }
        });
    }
}

Answer 1

Как я уже упоминал в моих комментариях выше, дочерние компоненты монтируются раньше своих родителей. componentDidMount вашего компонента входа происходит до componentDidMount вашего приложения. Вопрос переполнения стека с изложением deets.

Просто делая быстрый поиск, похоже, что большинство людей делают firebase.initializeApp вне своего компонента. Просто читал это .