[英]Storing a username on sign up only displays after page refresh (Firebase)
I'm new to React and Firebase, and I've been trying to solve this small User Sign-Up problem all day .我是 React 和 Firebase 的新手,整天都在尝试解决这个小的用户注册问题。 Hopefully someone can help me out, I'd be so grateful
希望有人能帮助我,我将不胜感激
I am making a twitter-like blog site with react and Firebase, and am currently using Firebase's auth.createUserWithEmailAndPassword() method to register a new user, with a username.我正在用 react 和 Firebase 制作一个类似 Twitter 的博客网站,目前正在使用 Firebase 的 auth.createUserWithEmailAndPassword() 方法来注册一个新用户,并使用用户名。 This is how I'm doing it:
我就是这样做的:
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);
});
};
After the user submits the form, they are redirected to the main page, which I then set the page to their current username.用户提交表单后,他们将被重定向到主页,然后我将页面设置为他们当前的用户名。 I'm setting the username by setting a state for it, and then passing it as a prop to all my pages.
我通过为其设置 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>
)
}
Almost everything works perfectly, however their username only shows up if they log out and log back in. Any help would be awesome!几乎一切正常,但是他们的用户名只有在他们注销并重新登录时才会显示。任何帮助都会很棒!
EDIT编辑
Here is my App Component.这是我的应用程序组件。 I moved the useEffect event here, however, I am still experiencing the same thing.
我在这里移动了 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 /> )} </> ); }
This was a super noob bug that I was experiencing, but instead of using useEffect to set the username, I just passed my setUserName state to my sign up component, and did away with useEffect entirely.这是我遇到的一个超级菜鸟错误,但我没有使用 useEffect 设置用户名,而是将我的 setUserName state 传递到我的注册组件,并完全取消了 useEffect。 This fixed everything.
这解决了一切。
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.