注册时存储用户名仅在页面刷新后显示（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。这解决了一切。

  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);

      })