在注册时存储用户名仅在页面刷新后显示 (Firebase)

Question

我是 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 /> )} </> ); }

Answer 1

这是我遇到的一个超级菜鸟错误，但我没有使用 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); })