reactjs - 如何将 Firebase onAuthStateChange 与新的 React Hooks 一起使用?
问题描述
我正在使用Firebase
为我的应用程序验证用户身份。我已经创建了SignIn
和SignUp
表单,并且可以成功创建新用户并使用存储的用户登录。但是,问题在于在Reload
.
我在教程中看到的方法是使用HOC
类似下面的方法来检查当前用户是否已登录。
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;
但是我希望使用新React
Hooks
的来消除对HOCs
. 我已经withFirebase()
HOC
通过使用React Context
anduseContext(FirebaseContext)
来访问Firebase
. 有没有办法使用新的hooks
来模仿我创造的这个?withAuthentication
HOC
components
我正在使用本教程
https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/
标题为“使用高阶组件的会话处理”的部分包含此部分。
谢谢!
解决方案
您可以编写一个Custom Hook
注册效果并返回身份验证状态的
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;
在任何Component
你都可以使用它
const MyComponent = (props) => {
const firebase = useContext(FirebaseContext);
const authUser = useFirebaseAuthentication(firebase);
return (...)
}
Index.jsx
里面会有这段代码
ReactDOM.render(
<FirebaseProvider>
<App />
</FirebaseProvider>,
document.getElementById('root'));
这个 Firebase Provider 是这样定义的,
import Firebase from './firebase';
const FirebaseContext = createContext();
export const FirebaseProvider = (props) => (
<FirebaseContext.Provider value={new Firebase()}>
{props.children}
</FirebaseContext.Provider>
);
推荐阅读
- python - 如何在 Flask 中使用 AJAX 遍历列表
- r - importerror 试图将 pandas 数据帧转换为 R 数据帧
- ruby-on-rails - has_one 虽然 has_one 的构建方法
- r - 在 R 中使用 fakeR 模拟数据
- mysql - 我怎么能使用 IN close 两次?
- amp-html - 显示从 json 到 AMP 页面的原始 HTML
- javascript - 如何在 Js 中以函数式方式编写代码
- c# - NativeScript HTTP 请求承诺 + WebApi 错误
- magento2 - Magento 2 - 图片标签返回产品名称
- azure-devops - 使用自定义函数应用编辑模式从 ARM 创建 Azure 函数