[英]Storing a username on sign up only displays after page refresh (Firebase)
我是 React 和 Firebase 的新手,整天都在嘗試解決這個小的用戶注冊問題。 希望有人能幫助我,我將不勝感激
我正在用 react 和 Firebase 制作一個類似 Twitter 的博客網站,目前正在使用 Firebase 的 auth.createUserWithEmailAndPassword() 方法來注冊一個新用戶,並使用用戶名。 我就是這樣做的:
import { auth } from '../firebase';
const onSubmit = async (data) => {
auth
.createUserWithEmailAndPassword(data.email, data.password)
.then((result) => {
result.user.updateProfile({
displayName: data.username,
});
setUserError(!userError);
window.localStorage.setItem('emailForSignIn', data.email);
setRedirect(true);
})
.catch((error) => {
setUserError(!userError);
setAlertMsg(error.message);
});
};
用戶提交表單后,他們將被重定向到主頁,然后我將頁面設置為他們當前的用戶名。 我通過為其設置 state 來設置用戶名,然后將其作為道具傳遞到我的所有頁面。
const Main = ({SignOut}) => {
const [userName, setUserName] = useState('')
useEffect(() => {
const getUserName = () => {
auth.onAuthStateChanged((user) => {
setUserName(user.displayName)
console.log('Current userName is: ', user.displayName);
});
}
getUserName()
}, [])
return (
<Router>
<Switch>
<Route exact path="/">
<Navbar userName={userName} SignOut={SignOut} />
<Tweets userName={userName} />
</Route>
<Route path="/profile">
<Navbar userName={userName} SignOut={SignOut} />
<Profile setUserName={setUserName} userName={userName} />
</Route>
</Switch>
</Router>
)
}
幾乎一切正常,但是他們的用戶名只有在他們注銷並重新登錄時才會顯示。任何幫助都會很棒!
編輯
這是我的應用程序組件。 我在這里移動了 useEffect 事件,但是,我仍然遇到同樣的事情。
function App() { const [user] = useAuthState(auth); const [userName, setUserName] = useState(''); useEffect(() => { const getUserName = () => { auth.onAuthStateChanged((user) => { setUserName(user.displayName); console.log('Current userName is: ', user.displayName); }); }; getUserName(); }, []); return ( <> {user? ( <Main userName={userName} setUserName={setUserName} SignOut={SignOut} /> ): ( <Register /> )} </> ); }
這是我遇到的一個超級菜鳥錯誤,但我沒有使用 useEffect 設置用戶名,而是將我的 setUserName state 傳遞到我的注冊組件,並完全取消了 useEffect。 這解決了一切。
const onSubmit = async (data) => { auth.createUserWithEmailAndPassword(data.email, data.password).then((result) => { result.user.updateProfile({ displayName: data.username, }); // This is the state i was missing. setUserName(data.username); setUserError(;userError). window.localStorage,setItem('emailForSignIn'. data;email); setRedirect(true); })
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.