我试图弄清楚如何使用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”,但仍无法解决问题。
我仍然被卡住。
谁能看到这里发生了什么问题?
export
到export const FirebaseContext
?