为什么在 firebase.auth().createUserWithEmailAndPassword() 调用之后 useRef() 挂钩设置为 null？

Question

useRef() is used like:

const firstname = useRef('');

const lastname = useRef('');

const email = useRef('');

const passwordOne = useRef('');

When I am writing it like this:

try {
    const authUser = await Firebase.auth
        .createUserWithEmailAndPassword(
            email.current.value,
            passwordOne.current.value
        );
    await Firebase.firestore.doc(`users/${authUser.user.uid}`).set({
        firstname: firstname.current.value,
        lastname: lastname.current.value,
        email: email.current.value
    });
    history.push(ROUTES.SIGN_IN);
}
catch (error) {
    setError(error.message);
}

I am getting an error that cannot read property value of null .

But this is working:

try {
    const user = {
        firstname: firstname.current.value,
        lastname: lastname.current.value,
        email: email.current.value
    };
    const authUser = await Firebase.auth
        .createUserWithEmailAndPassword(
            email.current.value,
            passwordOne.current.value
        );
    await Firebase.firestore.doc(`users/${authUser.user.uid}`).set(user);
    history.push(ROUTES.SIGN_IN);
}
catch (error) {
    setError(error.message);
}

How? And why?

Answer 1

one important thing you have to keep in mind is that you're dealing with asynchronous code, the time in which the statements with await will try to access the ref properties is not guaranteed and the refs might not be initialized yet.

My advice will be to refactor your code to use a Controlled Component with useState instead of handing DOM refs with useRef

In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState(). We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.