带有React Hooks的Firebase监听器


27

我试图弄清楚如何使用Firebase侦听器,以便使用React Hook更新来刷新云Firestore数据。

最初,我使用带有componentDidMount函数的类组件来获取Firestore数据。

this.props.firebase.db
    .collection('users')
    // .doc(this.props.firebase.db.collection('users').doc(this.props.firebase.authUser.uid))
.doc(this.props.firebase.db.collection('users').doc(this.props.authUser.uid))
.get()
.then(doc => {
    this.setState({ name: doc.data().name });
    // loading: false,
  });  
}

当页面更新时,该中断了,因此我试图弄清楚如何移动侦听器以响应挂钩。

我已经安装了react-firebase-hooks工具-尽管我不知道如何阅读说明才能使其正常工作。

我有一个功能组件,如下所示:

import React, { useState, useEffect } from 'react';
import { useDocument } from 'react-firebase-hooks/firestore';

import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch,
    useRouteMatch,
 } from 'react-router-dom';
import * as ROUTES from '../../constants/Routes';
import { compose } from 'recompose';
import { withFirebase } from '../Firebase/Index';
import { AuthUserContext, withAuthorization, withEmailVerification, withAuthentication } from '../Session/Index';

function Dashboard2(authUser) {
    const FirestoreDocument = () => {

        const [value, loading, error] = useDocument(
          Firebase.db.doc(authUser.uid),
          //firebase.db.doc(authUser.uid),
          //firebase.firestore.doc(authUser.uid),
          {
            snapshotListenOptions: { includeMetadataChanges: true },
          }
        );
    return (

        <div>    



                <p>
                    {error && <strong>Error: {JSON.stringify(error)}</strong>}
                    {loading && <span>Document: Loading...</span>}
                    {value && <span>Document: {JSON.stringify(value.data())}</span>}
                </p>




        </div>

    );
  }
}

export default withAuthentication(Dashboard2);

该组件在路由级别被包装在authUser包装器中,如下所示:

<Route path={ROUTES.DASHBOARD2} render={props => (
          <AuthUserContext.Consumer>
             { authUser => ( 
                <Dashboard2 authUser={authUser} {...props} />  
             )}
          </AuthUserContext.Consumer>
        )} />

我有一个firebase.js文件,该文件会按如下方式插入firestore:

class Firebase {
  constructor() {
    app.initializeApp(config).firestore();
    /* helpers */
    this.fieldValue = app.firestore.FieldValue;


    /* Firebase APIs */
    this.auth = app.auth();
    this.db = app.firestore();


  }

它还定义了一个侦听器,以知道authUser何时更改:

onAuthUserListener(next, fallback) {
    // onUserDataListener(next, fallback) {
      return this.auth.onAuthStateChanged(authUser => {
        if (authUser) {
          this.user(authUser.uid)
            .get()
            .then(snapshot => {
            let snapshotData = snapshot.data();

            let userData = {
              ...snapshotData, // snapshotData first so it doesn't override information from authUser object
              uid: authUser.uid,
              email: authUser.email,
              emailVerified: authUser.emailVerifed,
              providerData: authUser.providerData
            };

            setTimeout(() => next(userData), 0); // escapes this Promise's error handler
          })

          .catch(err => {
            // TODO: Handle error?
            console.error('An error occured -> ', err.code ? err.code + ': ' + err.message : (err.message || err));
            setTimeout(fallback, 0); // escapes this Promise's error handler
          });

        };
        if (!authUser) {
          // user not logged in, call fallback handler
          fallback();
          return;
        }
    });
  };

然后,在我的firebase上下文设置中,我有:

import FirebaseContext, { withFirebase } from './Context';
import Firebase from '../../firebase';
export default Firebase;
export { FirebaseContext, withFirebase };

上下文是在withFirebase包装器中设置的,如下所示:

import React from 'react';
const FirebaseContext = React.createContext(null);

export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);
export default FirebaseContext;

然后,在我的withAuthentication HOC中,我有一个上下文提供程序,如下所示:

import React from 'react';
import { AuthUserContext } from '../Session/Index';
import { withFirebase } from '../Firebase/Index';

const withAuthentication = Component => {
  class WithAuthentication extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        authUser: null,
      };  
    }

    componentDidMount() {
      this.listener = this.props.firebase.auth.onAuthStateChanged(
        authUser => {
           authUser
            ? this.setState({ authUser })
            : this.setState({ authUser: null });
        },
      );
    }

    componentWillUnmount() {
      this.listener();
    };  

    render() {
      return (
        <AuthUserContext.Provider value={this.state.authUser}>
          <Component {...this.props} />
        </AuthUserContext.Provider>
      );
    }
  }
  return withFirebase(WithAuthentication);

};
export default withAuthentication;

当前-当我尝试此操作时,我在Dashboard2组件中收到一条错误消息:

Firebase'未定义

我尝试使用小写的Firebase并得到相同的错误。

我还尝试了firebase.firestore和Firebase.firestore。我犯了同样的错误。

我想知道我是否不能将HOC与功能组件一起使用?

我看过这个演示应用程序和这篇博客文章

按照博客中的建议,我使用以下命令创建了一个新的firebase / contextReader.jsx:

 import React, { useEffect, useContext } from 'react';
import Firebase from '../../firebase';



export const userContext = React.createContext({
    user: null,
  })

export const useSession = () => {
    const { user } = useContext(userContext)
    return user
  }

  export const useAuth = () => {
    const [state, setState] = React.useState(() => 
        { const user = firebase.auth().currentUser 
            return { initializing: !user, user, } 
        }
    );
    function onChange(user) {
      setState({ initializing: false, user })
    }

    React.useEffect(() => {
      // listen for auth state changes
      const unsubscribe = firebase.auth().onAuthStateChanged(onChange)
      // unsubscribe to the listener when unmounting
      return () => unsubscribe()
    }, [])

    return state
  }  

然后,我尝试使用以下方法将App.jsx包装在该阅读器中:

function App() {
  const { initializing, user } = useAuth()
  if (initializing) {
    return <div>Loading</div>
  }

    // )
// }
// const App = () => (
  return (
    <userContext.Provider value={{ user }}> 


    <Router>
        <Navigation />
        <Route path={ROUTES.LANDING} exact component={StandardLanding} />

尝试此操作时,出现错误消息:

TypeError:_firebase__WEBPACK_IMPORTED_MODULE_2 __。default.auth不是一个函数

我已经看到这篇文章处理该错误,并尝试卸载并重新安装yarn。没有什么不同的。

当我查看演示应用程序时,它建议应使用“接口”方法创建上下文。我看不到它的来源-在文档中找不到解释它的参考。

除了尝试将其插入外,我无法理解这些说明。

我看过这篇文章,尝试不使用react-firebase-hooks来监听firestore。答案指向试图弄清楚如何使用此工具。

我已经阅读了关于如何从HOC转移到挂钩的出色解释。我对如何集成Firebase侦听器感到困惑。

我看过这篇文章,它提供了一个有关如何思考的有用示例。不知道我是否应该在authListener componentDidMount-或试图使用它的仪表板组件中尝试这样做。

NEXT ATTEMPT 我发现了这个帖子,它试图解决同样的问题。

当我尝试实施Shubham Khatri提供的解决方案时,我按如下所示设置了Firebase配置:

一个上下文提供者,具有:import React,来自'react'的{useContext};从'../../firebase'导入Firebase;

const FirebaseContext = React.createContext(); 

export const FirebaseProvider = (props) => ( 
   <FirebaseContext.Provider value={new Firebase()}> 
      {props.children} 
   </FirebaseContext.Provider> 
); 

然后,上下文挂钩具有:

import React, { useEffect, useContext, useState } from 'react';

const useFirebaseAuthentication = (firebase) => {
    const [authUser, setAuthUser] = useState(null);

    useEffect(() =>{
       const unlisten = 
firebase.auth.onAuthStateChanged(
          authUser => {
            authUser
              ? setAuthUser(authUser)
              : setAuthUser(null);
          },
       );
       return () => {
           unlisten();
       }
    });

    return authUser
}

export default useFirebaseAuthentication;

然后在index.js中,将应用程序包装在提供程序中为:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App/Index';
import {FirebaseProvider} from './components/Firebase/ContextHookProvider';

import * as serviceWorker from './serviceWorker';


ReactDOM.render(

    <FirebaseProvider> 
    <App /> 
    </FirebaseProvider>,
    document.getElementById('root')
);

    serviceWorker.unregister();

然后,当我尝试在组件中使用侦听器时,我有:

import React, {useContext} from 'react';
import { FirebaseContext } from '../Firebase/ContextHookProvider';
import useFirebaseAuthentication from '../Firebase/ContextHook';


const Dashboard2 = (props) => {
    const firebase = useContext(FirebaseContext);
    const authUser = 
useFirebaseAuthentication(firebase);

    return (
        <div>authUser.email</div>
    )
 }

 export default Dashboard2;

我尝试将其用作没有组件或身份验证包装的路由:

<Route path={ROUTES.DASHBOARD2} component={Dashboard2} />

尝试此操作时,出现错误消息:

尝试导入错误:“ FirebaseContext”未从“ ../Firebase/ContextHookProvider”导出。

该错误消息是有道理的,因为ContextHookProvider不会导出FirebaseContext-它会导出FirebaseProvider-但是如果我不尝试在Dashboard2中导入它,那么我将无法在尝试使用它的函数中对其进行访问。

这种尝试的副作用是我的注册方法不再起作用。现在,它会生成一条错误消息,内容为:

TypeError:无法读取null的属性'doCreateUserWithEmailAndPassword'

稍后我将解决此问题-但必须有一种方法来弄清楚如何与不使用几个月的循环的Firebase通过数百万条无法获得基本身份验证设置的途径进行交互。是否有适用于React钩子的Firebase(firestore)入门套件?

下一步尝试 在本教程的课程中尝试采用该方法-但这仅用于生成表单输入-没有侦听器可以绕过路由以与已验证的用户进行调整。

我试图遵循本youtube教程中的方法-该回购协议可以从中使用。它显示了如何使用钩子,但没有显示上下文。

下一个尝试 我发现此存储库似乎具有经过深思熟虑的方法来将钩子与Firestore结合使用。但是,我无法理解代码。

我克隆了它-尝试添加所有公共文件,然后在我运行它时-我实际上无法使代码运行。我不确定如何运行它的说明中缺少了什么,以便查看代码中是否有可以帮助解决此问题的课程。

下次尝试

我购买了divjoy模板,该模板的广告宣传是为Firebase设置的(如果其他人考虑将其作为选项,则不是为firestore设置的)。

该模板提出了一个auth包装器,用于初始化应用程序的配置-但仅用于auth方法-因此,需要对其进行重组以允许其他上下文提供程序用于firestore。当你蒙混过关该过程,并使用所示的处理这个帖子,剩下的就是在下面的回调的错误:

useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        setUser(user);
      } else {
        setUser(false);
      }
    });

它不知道什么是火力基地。这是因为它是在firebase上下文提供程序中定义的,该提供程序被导入并定义为(在useProvideAuth()函数中)为:

  const firebase = useContext(FirebaseContext)

没有机会进行回调,错误提示:

React Hook useEffect缺少依赖项:“ firebase”。包括它或删除依赖项数组

或者,如果我尝试将该const添加到回调中,则会收到一条错误消息:

无法在回调内部调用React Hook“ useContext”。必须在React函数组件或自定义的React Hook函数中调用React Hooks

下次尝试

我将Firebase配置文件简化为仅配置变量(我将在上下文提供程序中为我要使用的每个上下文编写帮助程序)。

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

const devConfig = {
    apiKey: process.env.REACT_APP_DEV_API_KEY,
    authDomain: process.env.REACT_APP_DEV_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DEV_DATABASE_URL,
    projectId: process.env.REACT_APP_DEV_PROJECT_ID,
    storageBucket: process.env.REACT_APP_DEV_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_DEV_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_DEV_APP_ID

  };


  const prodConfig = {
    apiKey: process.env.REACT_APP_PROD_API_KEY,
    authDomain: process.env.REACT_APP_PROD_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_PROD_DATABASE_URL,
    projectId: process.env.REACT_APP_PROD_PROJECT_ID,
    storageBucket: process.env.REACT_APP_PROD_STORAGE_BUCKET,
    messagingSenderId: 
process.env.REACT_APP_PROD_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_PROD_APP_ID
  };

  const config =
    process.env.NODE_ENV === 'production' ? prodConfig : devConfig;


class Firebase {
  constructor() {
    firebase.initializeApp(config);
    this.firebase = firebase;
    this.firestore = firebase.firestore();
    this.auth = firebase.auth();
  }
};

export default Firebase;  

然后,我有一个身份验证上下文提供程序,如下所示:

import React, { useState, useEffect, useContext, createContext } from "react";
import Firebase from "../firebase";

const authContext = createContext();

// Provider component that wraps app and makes auth object ...
// ... available to any child component that calls useAuth().
export function ProvideAuth({ children }) {
  const auth = useProvideAuth();

  return <authContext.Provider value={auth}>{children}</authContext.Provider>;
}

// Hook for child components to get the auth object ...
// ... and update when it changes.
export const useAuth = () => {

  return useContext(authContext);
};

// Provider hook that creates auth object and handles state
function useProvideAuth() {
  const [user, setUser] = useState(null);


  const signup = (email, password) => {
    return Firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then(response => {
        setUser(response.user);
        return response.user;
      });
  };

  const signin = (email, password) => {
    return Firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(response => {
        setUser(response.user);
        return response.user;
      });
  };



  const signout = () => {
    return Firebase
      .auth()
      .signOut()
      .then(() => {
        setUser(false);
      });
  };

  const sendPasswordResetEmail = email => {
    return Firebase
      .auth()
      .sendPasswordResetEmail(email)
      .then(() => {
        return true;
      });
  };

  const confirmPasswordReset = (password, code) => {
    // Get code from query string object
    const resetCode = code || getFromQueryString("oobCode");

    return Firebase
      .auth()
      .confirmPasswordReset(resetCode, password)
      .then(() => {
        return true;
      });
  };

  // Subscribe to user on mount
  useEffect(() => {

    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        setUser(user);
      } else {
        setUser(false);
      }
    });

    // Subscription unsubscribe function
    return () => unsubscribe();
  }, []);

  return {
    user,
    signup,
    signin,
    signout,
    sendPasswordResetEmail,
    confirmPasswordReset
  };
}

const getFromQueryString = key => {
  return queryString.parse(window.location.search)[key];
};

我还制作了一个firebase上下文提供程序,如下所示:

import React, { createContext } from 'react';
import Firebase from "../../firebase";

const FirebaseContext = createContext(null)
export { FirebaseContext }


export default ({ children }) => {

    return (
      <FirebaseContext.Provider value={ Firebase }>
        { children }
      </FirebaseContext.Provider>
    )
  }

然后,在index.js中,将应用包装在firebase提供程序中

ReactDom.render(
    <FirebaseProvider>
        <App />
    </FirebaseProvider>, 
document.getElementById("root"));

serviceWorker.unregister();

在我的路由列表中,我已将相关路由包装在auth提供程序中:

import React from "react";
import IndexPage from "./index";
import { Switch, Route, Router } from "./../util/router.js";

import { ProvideAuth } from "./../util/auth.js";

function App(props) {
  return (
    <ProvideAuth>
      <Router>
        <Switch>
          <Route exact path="/" component={IndexPage} />

          <Route
            component={({ location }) => {
              return (
                <div
                  style={{
                    padding: "50px",
                    width: "100%",
                    textAlign: "center"
                  }}
                >
                  The page <code>{location.pathname}</code> could not be found.
                </div>
              );
            }}
          />
        </Switch>
      </Router>
    </ProvideAuth>
  );
}

export default App;

通过这种特殊的尝试,我回到了之前用此错误标记的问题:

TypeError:_firebase__WEBPACK_IMPORTED_MODULE_2 __。default.auth不是一个函数

它指向auth提供者的这一行是在创建问题:

useEffect(() => {

    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        setUser(user);
      } else {
        setUser(false);
      }
    });

我尝试在Firebase中使用大写的F,它会产生相同的错误。

当我尝试Tristan的建议时,我将所有这些内容删除并尝试将unsubscribe方法定义为unlisten方法(我不知道他为什么不使用firebase语言-但如果他的方法有效,我会更加努力找出原因)。当我尝试使用他的解决方案时,错误消息显示:

TypeError:_util_contexts_Firebase__WEBPACK_IMPORTED_MODULE_8 ___ default(...)不是函数

这篇文章的答案建议从auth之后删除()。尝试该操作时,出现错误消息:

TypeError:无法读取未定义的属性“ onAuthStateChanged”

但是,这篇文章建议在身份验证文件中导入firebase的方式存在问题。

我将其导入为:从“ ../firebase”导入Firebase;

Firebase是该类的名称。

特里斯坦(Tristan)推荐的视频对背景很有帮助,但我目前在第9集,但仍找不到应该有助于解决此问题的部分。有人知道在哪里找到吗?

下一次尝试 下-并试图既解决了上下文的问题-我有两个进口和的createContext和useContext试图利用他们作为显示此文档。

我无法通过错误提示:

错误:无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一:...

我一直在通过此链接中的建议来尝试解决此问题,但无法解决。我没有此故障排除指南中显示的任何问题。

当前-上下文语句如下所示:

import React, {  useContext } from 'react';
import Firebase from "../../firebase";


  export const FirebaseContext = React.createContext();

  export const useFirebase = useContext(FirebaseContext);

  export const FirebaseProvider = props => (
    <FirebaseContext.Provider value={new Firebase()}>
      {props.children}
    </FirebaseContext.Provider>
  );  

我花了一些时间在这条肮脏的课程上,试图弄清楚上下文,并将元素与该问题挂钩-观看之后-下面Tristan提出的解决方案的唯一方面是,在他的帖子中未正确调用createContext方法。它必须是“ React.createContext”,但仍无法解决问题。

我仍然被卡住。

谁能看到这里发生了什么问题?


它是未定义的,因为您没有导入它。
Josh Pittman

3
您是否只需要添加exportexport const FirebaseContext
Federkun

您好,梅尔抱歉,回复缓慢,我已经工作了两个星期,这真是太疯狂了,所以晚上看电脑是不可能的!我已经为您更新了答案,以提供您可以检查的干净且非常简单的解决方案。
Tristan Trainer

非常感谢-我现在来看。
梅尔

嗨,梅尔,刚刚通过Firestore实时更新的正确实现进行了进一步更新(可以删除onSnapshot部分使其不实时)。如果这是解决方案,请建议您更新您的问题以使其成为短了很多,更简洁,让其他人查看它可能会找到解决方案也是如此,谢谢-对不起再次响应缓慢的性质
特里斯坦教练

Answers:


12

主要编辑:花了一些时间对此进行更多研究,这是我想出的一个更干净的解决方案,可能有人不赞成我这是解决此问题的好方法。

使用Firebase身份验证挂钩

import { useEffect, useState, useCallback } from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxx",
  authDomain: "xxxx.firebaseapp.com",
  databaseURL: "https://xxxx.firebaseio.com",
  projectId: "xxxx",
  storageBucket: "xxxx.appspot.com",
  messagingSenderId: "xxxxxxxx",
  appId: "1:xxxxxxxxxx:web:xxxxxxxxx"
};

firebase.initializeApp(firebaseConfig)

const useFirebase = () => {
  const [authUser, setAuthUser] = useState(firebase.auth().currentUser);

  useEffect(() => {
    const unsubscribe = firebase.auth()
      .onAuthStateChanged((user) => setAuthUser(user))
    return () => {
      unsubscribe()
    };
  }, []);

  const login = useCallback((email, password) => firebase.auth()
    .signInWithEmailAndPassword(email, password), []);

  const logout = useCallback(() => firebase.auth().signOut(), [])

  return { login, authUser, logout }
}

export { useFirebase }

如果authUser为null,则不进行身份验证;如果user有值,则进行身份验证。

firebaseConfig可以在firebase 控制台上找到=> 项目设置 => 应用 => 配置单选按钮

useEffect(() => {
  const unsubscribe = firebase.auth()
    .onAuthStateChanged(setAuthUser)

  return () => {
    unsubscribe()
  };
}, []);

这个useEffect挂钩是跟踪用户authChanges的核心。我们将侦听器添加到firebase.auth()的onAuthStateChanged事件中,以更新authUser的值。此方法返回用于取消订阅该侦听器的回调,当useFirebase挂钩刷新时,我们可以使用该回调来清理侦听器。

这是我们进行Firebase身份验证所需的唯一挂钩(可以为firestore等制作其他挂钩。

const App = () => {
  const { login, authUser, logout } = useFirebase();

  if (authUser) {
    return <div>
      <label>User is Authenticated</label>
      <button onClick={logout}>Logout</button>
    </div>
  }

  const handleLogin = () => {
    login("name@email.com", "password0");
  }

  return <div>
    <label>User is not Authenticated</label>
    <button onClick={handleLogin}>Log In</button>
  </div>
}

这是App组件的基本实现create-react-app

使用Firestore数据库挂钩

const useFirestore = () => {
  const getDocument = (documentPath, onUpdate) => {
    firebase.firestore()
      .doc(documentPath)
      .onSnapshot(onUpdate);
  }

  const saveDocument = (documentPath, document) => {
    firebase.firestore()
      .doc(documentPath)
      .set(document);
  }

  const getCollection = (collectionPath, onUpdate) => {
    firebase.firestore()
      .collection(collectionPath)
      .onSnapshot(onUpdate);
  }

  const saveCollection = (collectionPath, collection) => {
    firebase.firestore()
      .collection(collectionPath)
      .set(collection)
  }

  return { getDocument, saveDocument, getCollection, saveCollection }
}

可以像这样在您的组件中实现:

const firestore = useFirestore();
const [document, setDocument] = useState();

const handleGet = () => {
  firestore.getDocument(
    "Test/ItsWFgksrBvsDbx1ttTf", 
    (result) => setDocument(result.data())
  );
}

const handleSave = () => {
  firestore.saveDocument(
    "Test/ItsWFgksrBvsDbx1ttTf", 
    { ...document, newField: "Hi there" }
  );

}

然后,当我们直接从firebase本身获取更新时,这消除了对React useContext的需求。

请注意以下几点:

  1. 保存未更改的文档不会触发新的快照,因此“过度保存”不会导致重新渲染
  2. 调用getDocument时,会立即使用初始“​​快照”立即调用onUpdate回调,因此您不需要其他代码即可获取文档的初始状态。

编辑已删除了大部分旧答案


1
谢谢你 我看不到您如何进行设置。通过提供程序,我得到一个错误,指出未定义createContext。那是因为到目前为止没有消费者。你把你放在哪里?
梅尔

抱歉,createContext是react的一部分,因此将其从'react'中导入为{createContext}的顶部,我意识到我忘记显示Firebase提供程序的位置,我将编辑答案
Tristan Trainer

我确实在提供程序中导入了它,但是它呈现为未定义。我认为那是因为没有消费者
梅尔

1
使用者是useContext()钩子,但再次查看您的问题,似乎您没有从文件中导出FirebaseContext-这就是为什么它找不到上下文的原因:)
Tristan Trainer

1
嗨,@ Mel谢谢您,非常好,希望最终证明对您有帮助。Hooks和Firebase都参与其中,花了很长时间我才得以解决,即使到现在我可能也找不到最佳的解决方案,我可能会花一些时间来创建有关此方法的教程,因为在编写代码时更容易解释它。
Tristan教练

4

Firebase未定义,因为您没有导入它。首先,它需要firebase.firestore()如您链接到https://github.com/CSFrequency/react-firebase-hooks/tree/master/firestore的文档中的示例所示。然后,您需要在文件中实际导入firebase,import * as firebase from 'firebase';如firebase软件包自述文件中所述:https: //www.npmjs.com/package/firebase


1
我将其导入index.js
梅尔,

1
ReactDOM.render(<FirebaseContext.Provider value = {new Firebase()}> <App /> </FirebaseContext.Provider>,document.getElementById('root'));
梅尔

1
这就是为什么该方法可用于componentDidMount的原因
Mel

1
withAuth HOC也包装在了Firebase中。
梅尔

3
但是您的错误表明它是不确定的。我正在帮助您定义它,您不是在告诉我解决方案是否有效或所导致的错误是什么。您总是很难帮助梅尔。我的观点是,您正在将其导入除dashboard2组件文件以外的其他文件中,该文件是您引用该文件的位置,这会导致错误。使索引中的内容变得无用并不能帮助您的构建了解完全不同的文件中的内容。
Josh Pittman

2

编辑(2020年3月3日):

让我们从头开始。

  1. 我创建了一个新项目:

    毛线创建react-app firebase-hook-issue

  2. 我已经删除了默认情况下创建的所有3个App *文件,删除了从index.js导入的文件,还删除了服务工作者,以拥有一个像这样的干净index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const App = () => {
    return (
        <div>
            Hello Firebase!            
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));
  1. 我已经启动该应用程序以查看Hello Firebase!打印出来。
  2. 我添加了firebase模块
yarn add firebase
  1. 我已经运行了firebase init来为该项目设置firebase。我选择了一个空的Firebase项目,并选择了Database和Firestore,它们最终创建了下一个文件:
.firebaserc
database.rules.json
firebase.json
firestore.indexes.json
firestore.rules
  1. 我为firebase库添加了导入,还创建了Firebase类和FirebaseContext。最后,我将应用程序包装在FirebaseContext.Provider组件中,并将其值设置为新的Firebase()实例。这是因为我们只能实例化一个Firebase应用程序实例,因为它必须是单例:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

import app from "firebase/app";
import "firebase/database";
import "firebase/auth";
import "firebase/firestore";

class Firebase {
    constructor() {
        app.initializeApp(firebaseConfig);

        this.realtimedb = app.database();
        this.firestore = app.firestore();
    }
}

const FirebaseContext = React.createContext(null);

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
};

const App = () => {
    return <div>Hello Firebase!</div>;
};

ReactDOM.render(
    <FirebaseContext.Provider value={new Firebase()}>
        <App />
    </FirebaseContext.Provider>
    , document.getElementById("root"));
  1. 让我们验证我们可以从Firestore中读取任何内容。为了首先验证读数,我进入了Firebase控制台中的项目,打开了Cloud Firestore数据库,并添加了一个名为counters的新集合,其中包含一个简单的文档,其中包含一个名为type number和value 0的的字段。 在此处输入图片说明 在此处输入图片说明

  2. 然后,我更新了App类以使用我们创建的FirebaseContext,为简单的计数器挂钩使用useState挂钩,并使用useEffect挂钩从firestore中读取值:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

import app from "firebase/app";
import "firebase/database";
import "firebase/auth";
import "firebase/firestore";

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
};

class Firebase {
    constructor() {
        app.initializeApp(firebaseConfig);

        this.realtimedb = app.database();
        this.firestore = app.firestore();
    }
}

const FirebaseContext = React.createContext(null);

const App = () => {
    const firebase = React.useContext(FirebaseContext);
    const [counter, setCounter] = React.useState(-1);

    React.useEffect(() => {
        firebase.firestore.collection("counters").doc("simple").get().then(doc => {
            if(doc.exists) {
                const data = doc.data();
                setCounter(data.value);
            } else {
                console.log("No such document");
            }
        }).catch(e => console.error(e));
    }, []);

    return <div>Current counter value: {counter}</div>;
};

ReactDOM.render(
    <FirebaseContext.Provider value={new Firebase()}>
        <App />
    </FirebaseContext.Provider>
    , document.getElementById("root"));

注意:为了使答案尽可能短,我通过将对Firestore的访问权限设置为测试模式(firestore.rules文件)来确保您不需要通过Firebase进行身份验证:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    // This rule allows anyone on the internet to view, edit, and delete
    // all data in your Firestore database. It is useful for getting
    // started, but it is configured to expire after 30 days because it
    // leaves your app open to attackers. At that time, all client
    // requests to your Firestore database will be denied.
    //
    // Make sure to write security rules for your app before that time, or else
    // your app will lose access to your Firestore database
    match /{document=**} {
      allow read, write: if request.time < timestamp.date(2020, 4, 8);
    }
  }
}

我之前的回答: 非常欢迎您来看看我的react-firebase-auth-skeleton:

https://github.com/PompolutZ/react-firebase-auth-skeleton

它主要遵循以下文章:

https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial

但是有点改写以使用钩子。我在至少两个项目中使用了它。

我当前的宠物项目的典型用法:

import React, { useState, useEffect, useContext } from "react";
import ButtonBase from "@material-ui/core/ButtonBase";
import Typography from "@material-ui/core/Typography";
import DeleteIcon from "@material-ui/icons/Delete";
import { FirebaseContext } from "../../../firebase";
import { useAuthUser } from "../../../components/Session";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        position: "relative",
        "&::-webkit-scrollbar-thumb": {
            width: "10px",
            height: "10px",
        },
    },

    itemsContainer: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        display: "flex",
        alignItems: "center",
        overflow: "auto",
    },
}));

export default function LethalHexesPile({
    roomId,
    tokens,
    onSelectedTokenChange,
}) {
    const classes = useStyles();
    const myself = useAuthUser();
    const firebase = useContext(FirebaseContext);
    const pointyTokenBaseWidth = 95;
    const [selectedToken, setSelectedToken] = useState(null);

    const handleTokenClick = token => () => {
        setSelectedToken(token);
        onSelectedTokenChange(token);
    };

    useEffect(() => {
        console.log("LethalHexesPile.OnUpdated", selectedToken);
    }, [selectedToken]);

    const handleRemoveFromBoard = token => e => {
        console.log("Request remove token", token);
        e.preventDefault();
        firebase.updateBoardProperty(roomId, `board.tokens.${token.id}`, {
            ...token,
            isOnBoard: false,
            left: 0,
            top: 0,
            onBoard: { x: -1, y: -1 },
        });
        firebase.addGenericMessage2(roomId, {
            author: "Katophrane",
            type: "INFO",
            subtype: "PLACEMENT",
            value: `${myself.username} removed lethal hex token from the board.`,
        });
    };

    return (
        <div className={classes.root}>
            <div className={classes.itemsContainer}>
                {tokens.map(token => (
                    <div
                        key={token.id}
                        style={{
                            marginRight: "1rem",
                            paddingTop: "1rem",
                            paddingLeft: "1rem",
                            filter:
                            selectedToken &&
                            selectedToken.id === token.id
                                ? "drop-shadow(0 0 10px magenta)"
                                : "",
                            transition: "all .175s ease-out",
                        }}
                        onClick={handleTokenClick(token)}
                    >
                        <div
                            style={{
                                width: pointyTokenBaseWidth * 0.7,
                                position: "relative",
                            }}
                        >
                            <img
                                src={`/assets/tokens/lethal.png`}
                                style={{ width: "100%" }}
                            />
                            {selectedToken && selectedToken.id === token.id && (
                                <ButtonBase
                                    style={{
                                        position: "absolute",
                                        bottom: "0%",
                                        right: "0%",
                                        backgroundColor: "red",
                                        color: "white",
                                        width: "2rem",
                                        height: "2rem",
                                        borderRadius: "1.5rem",
                                        boxSizing: "border-box",
                                        border: "2px solid white",
                                    }}
                                    onClick={handleRemoveFromBoard(token)}
                                >
                                    <DeleteIcon
                                        style={{
                                            width: "1rem",
                                            height: "1rem",
                                        }}
                                    />
                                </ButtonBase>
                            )}
                        </div>
                        <Typography>{`${token.id}`}</Typography>
                    </div>
                ))}
            </div>
        </div>
    );
}

这里最重要的两个部分是:-useAuthUser()挂钩,它提供当前经过身份验证的用户。-FirebaseContext,我通过useContext挂钩使用。

const firebase = useContext(FirebaseContext);

当您拥有Firebase的上下文时,您可以根据自己的喜好实现firebase对象。有时我确实编写了一些有用的函数,有时有时更容易在我为当前组件创建的useEffect挂钩中设置侦听器。

该文章最好的部分之一是withAuthorization HOC的创建,它允许您在组件本身中指定访问页面的先决条件:

const condition = authUser => authUser && !!authUser.roles[ROLES.ADMIN];
export default withAuthorization(condition)(AdminPage);

甚至可以直接在路由器实施中设置这些条件。

希望查看回购和文章会给您一些额外的想法,以增强对您问题的其他出色答案。


我买了他的书,按照他的方法。我发现条件方法在实施时实际上不起作用,并且该书中列出的auth协议无法通过组件更新来维持状态。我还没有找到使用那本书中所阐述内容的方法。无论如何,感谢您分享您的想法。
梅尔

我不确定你的意思。您是否在Firebase项目中尝试了我的骨架应用程序?据我所知,所有条件都有效,因为我至少在3个项目中使用了它。
fxdxpz
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.