注册时存储用户名仅在页面刷新后显示（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);

      });

  };

用户提交表单后，他们将被重定向到主页，然后我将页面设置为他们当前的用户名。我通过设置用户名的状态来设置用户名，然后将其作为道具传递到我的所有页面。

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>

  )

}

几乎一切都很完美，但是他们的用户名只有在注销并重新登录时才会显示。任何帮助都会很棒！

Answer 1

这是我遇到的一个超级菜鸟错误，但我没有使用 useEffect 来设置用户名，而是将 setUserName 状态传递给我的注册组件，并完全取消了 useEffect。这解决了一切。&nbsp; const onSubmit = async (data) => {&nbsp; &nbsp; auth&nbsp; &nbsp; &nbsp; .createUserWithEmailAndPassword(data.email, data.password)&nbsp; &nbsp; &nbsp; .then((result) => {&nbsp; &nbsp; &nbsp; &nbsp; result.user.updateProfile({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; displayName: data.username,&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; // This is the state i was missing.&nbsp; &nbsp; &nbsp; &nbsp; setUserName(data.username);&nbsp; &nbsp; &nbsp; &nbsp; setUserError(!userError);&nbsp; &nbsp; &nbsp; &nbsp; window.localStorage.setItem('emailForSignIn', data.email);&nbsp; &nbsp; &nbsp; &nbsp; setRedirect(true);&nbsp; &nbsp; &nbsp; })