我遵循using-firebaseauth-with-local-state在我的react应用中实现身份验证,但是我正在使用功能组件和挂钩。我应该如何实现componentDidMount()
和componentWillUnmount()
?
这是我在Login.jsx
组件中的代码:
import React, { useState, useEffect } from 'react'
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import firebase from "firebase";
// Configure Firebase.
const config = {
apiKey: "myapikey",
authDomain: "mydomain.firebaseapp.com"
// ...
};
firebase.initializeApp(config);
// Configure FirebaseUI.
const uiConfig = {
// Popup signin flow rather than redirect flow.
signInFlow: "popup",
// Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
signInSuccessUrl: "/",
// We will display Google and Facebook as auth providers.
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID
],
callbacks: {
// Avoid redirects after sign-in.
signInSuccessWithAuthResult: () => false
}
};
export default function Login() {
const [signedIn, setSignIn]= useState(false);
useEffect(() => {
return () => {
const unregisterAuthObserver = firebase.auth().onAuthStateChanged(
(user) => setSignIn({isSignedIn: !!user})
);
unregisterAuthObserver();
console.log("Sdd")
};
})
if (!signedIn) {
return (
<div>
<h1>My App</h1>
<p>Please sign-in:</p>
<StyledFirebaseAuth
uiConfig={uiConfig}
firebaseAuth={firebase.auth()}
/>
</div>
);
}
return (
<div>
<h1>My App</h1>
<p>Welcome {firebase.auth().currentUser.displayName}! You are now signed-in!</p>
<a onClick={() => firebase.auth().signOut()}>Sign-out</a>
</div>
);
}
最佳答案
我应该如何实现componentDidMount()
和
componentWillUnmount()
?
将useEffect
与一个空数组一起使用以模拟componentDidMount
;然后从相同的useEffect
返回一个函数以模拟componentWillUnmount
。
在您的代码中,useEffect
返回一个函数,这意味着该函数将在卸载组件时执行,因此,当您使用firebase.auth().onAuthStateChanged
组件完成操作时,您的Login
将被钩住。
要制作适当的钩子,请像这样设置useEffect
:
useEffect(() => {
const unregisterAuthObserver = firebase.auth()
.onAuthStateChanged(
(user) => setSignIn({isSignedIn: !!user})
);
// Now you either return just unregisterAuthObserver
// which will be called when the component is unmounted
return unregisterAuthObserver;
// or you create a function if you want more login when the component is unmounted
// return () => {
// unregisterAuthObserver();
// console.log("Sdd");
// }
}, []); // Important, pass an empty array so to execute useEffect hook only once
关于javascript - 如何使用带有钩子(Hook)的本地状态实现Firebase身份验证?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/60420906/