“运行npm install后,“ getFirebase()不是函数”

问题描述 投票:0回答:1

我一直在开发一个小小的React应用程序,并且运行良好,我想但是我离我想要的理解水平还差得远。我遇到了一个障碍,使我感到震惊。在我的代码中一切都很好。我在我的环境(Visual Studio)中打开了另一个应用程序,但该应用程序无法正常运行,因此在执行npm Install的另一个程序员的建议下,我的建议是。这是我的问题开始的地方。我不知道确切的原因,但我担心我的包裹被弄乱了。在此之后重新打开自己的应用程序时,我开始在调试器中收到标题为“ getFirebase()不是函数”的错误消息。显然,丢失的东西停止了工作。我试图还原软件包并安装正确版本的东西。根据npm列表,我的安装版本是:

"firebase": "6.6.1",
"react-redux-firebase": "2.4.1",
"redux-firestore": "^0.9.0",

我已经用这个愚蠢的Google搜索自己了,react-redux-firebase v3似乎经常会导致这个问题,但是我没有那个。我不再知道该继续寻找,Google毫无帮助。你们中的一位专家能指出我正确的方向吗?

[您将在下面找到我的firebase配置文件,使用它的index.js,触发错误的操作代码以及触发该操作的页面。谢谢大家的时间!

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {createStore, applyMiddleware, compose} from 'redux';
import {Provider} from 'react-redux';
import rootReducer from './reducers/rootReducer';
import thunk from 'redux-thunk';
import { reduxFirestore, getFirestore } from 'redux-firestore';
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import fbConfig from './config/fbConfig'

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

const store = createStore(rootReducer, compose(
    applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
    reactReduxFirebase(fbConfig, { userProfile: 'users', useFirestoreForProfile: true, attachAuthIsReady: true }),
    reduxFirestore(fbConfig) // redux bindings for firestore
));

store.firebaseAuthIsReady.then(() => {
    ReactDOM.render(
        <BrowserRouter basename={baseUrl}>
    <Provider store={store}><App/></Provider>
  </BrowserRouter>,
        rootElement);

    registerServiceWorker();
});

fbConfig.js

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

var firebaseConfig = {
    apiKey: "my valid but secret key",
    authDomain: "my domain",
    databaseURL: "my url",
    projectId: "my projectId",
    storageBucket: "",
    messagingSenderId: "some number",
    appId: "some other number"
  };

    // Initialize Firebase
firebase.initializeApp(firebaseConfig);
//const auth = firebase.auth();
firebase.firestore().settings({ });

export default firebase;

authActions.js

import { sendObjectToApi } from '../functions/fetching';

export const signIn = (credentials) => {
    return (dispatch, {getFirebase}) => {
        const firebase = getFirebase();
        console.log(firebase);
        firebase.auth().signInWithEmailAndPassword(
            credentials.email,
            credentials.password
        ).then(() => {
            dispatch({ type: 'LOGIN_SUCCESS' });
        }).catch((err) => {
            dispatch({ type: 'LOGIN_ERROR', err });
        });

    }
}

export const signOut = () => {
    return(dispatch, {getFirebase}) => {
        const firebase = getFirebase();
        console.log(firebase);
        firebase.auth().signOut().then(() => {
            dispatch({ type: 'SIGNOUT_SUCCES' });
        });
    }
}

export const signUp = (newUser) => {
    return (dispatch, {getFirebase}) => {
        const firebase = getFirebase();
        firebase.auth().createUserWithEmailAndPassword(newUser.email, newUser.password)
            .then((resp) => {
                newUser.firebaseId = resp.user.uid;
                sendObjectToApi('/api/User/AddUser', newUser, '');
            }).then(() => {
                dispatch({ type: 'SIGNUP_SUCCES' });
            }).catch(err => {
                dispatch({ type: 'SIGNUP_ERROR', err });
            });
    }
}

signedInLinks.js

import React from 'react';
import { connect } from 'react-redux'
import { signOut } from '../../Actions/authActions'
import { withRouter } from 'react-router';
import { NavLink } from 'react-router-dom';

const SignedInLinks = (props) => {
    return (
        <ul className="navbar-nav flex-grow">
            <li>
                <NavLink className="text-dark" to="/Login" onClick={props.signOut}>Log uit</NavLink>
            </li>
        </ul>);
};

const mapDispatchToProps = (dispatch) => {
    return {
        signOut: () => dispatch(signOut())
    };
};

export default withRouter(connect(null, mapDispatchToProps)(SignedInLinks));
reactjs firebase redux thunk
1个回答
0
投票

我花了三天的时间进行搜索,但是我发现自己的方式有误,我将留在这里进行后期研究。

在清理代码期间,我删除了Visual Studio声称未使用的变量。放回去解决了这个问题。更改完全在authActions.js中,需要恢复getState,如下所示:

export const signIn = (credentials) => {
    return (dispatch, **getState**, {getFirebase}) => {
        const firebase = getFirebase();
        console.log(firebase);
        firebase.auth().signInWithEmailAndPassword(
            credentials.email,
            credentials.password
        ).then(() => {
            dispatch({ type: 'LOGIN_SUCCESS' });
        }).catch((err) => {
            dispatch({ type: 'LOGIN_ERROR', err });
        });

    }
}

我希望这对某人有帮助。

© www.soinside.com 2019 - 2024. All rights reserved.