reactjs - Pass props inside function on firebase.utils.js

Question

I have a weird question, but I really cannot get it fixed and I have been stumbling upon it for days now.

Here I have a functional component - SignUp:

const SignUp = () => {
  const [user, setUser] = useState({
    displayName: "",
    email: "",
    password: "",
    confirmPassword: "",
  });

  const handleSubmit = async (event) => {
    event.preventDefault();

    const { displayName, email, password, confirmPassword } = user;

    if (password !== confirmPassword) {
      alert("Passwords don't match");
      return;
    }

    try {
      const { newUser } = await auth.createUserWithEmailAndPassword(
        email,
        password
      );

      console.log('SignUp displayName: ', displayName);

      await createUserProfileDocument(newUser, displayName);

      setUser({
        displayName: "",
        email: "",
        password: "",
        confirmPassword: "",
      });
    } catch (err) {
      console.log(err);
    }
  };

  const handleChange = (event) => {
    const { name, value } = event.target;
    setUser({ ...user, [name]: value });
  };

  return (
    // Form with displayName, email, password, confirmPassword inputs
  );
};

And this is the 'createUserProfileDocument' function from the firebase.utils:

export const createUserProfileDocument = async (userAuth, additionalData) => {
    if (!userAuth) return;

    const userRef = firestore.doc(`users/${userAuth.uid}`);

    // const snapShot = await userRef.get();

    console.log('additionalData: ', additionalData);

    console.log('userAuth: ', userAuth);

    // if (!snapShot.exists) {
    //     const { displayName, email } = userAuth;
    //     const createdAt = new Date();
    //     try {
    //         await userRef.set({
    //             displayName,
    //             email,
    //             createdAt,
    //             ...additionalData
    //         });
    //     } catch (err) {
    //         console.log('error creating user', err.message);
    //     }
    // }

    return userRef;
};

Problem on this code, is that when I submit the form, it triggers the handleSubmit which calls the createUserProfileDocument function.. At that point, it gets the userAuth object properly, but it doesn't get any 'additionalData' prop, displaying undefined instead..

What can be the reason for that? I can confirm both the form and handleChange work properly, updating the user hook state with the inserted values

The console.log I added on the SignUp component (inside handleSubmit) displays the displayName correctly; On the other hand, the console.logs inside the firebase.utils, display the userAuth but instead of getting those additionalData (which in this case is the displayName), it gets undefined

Here what I get from the console.logs:

On userAuth I still don't get any displayName but can retrieve the email:

This are the user properties that gets saved after filling the form:

I really don't get what I'm doing wrong in something so simple as passing props.. Maybe the createUserProfileDocument function gets called before the displayName gets passed inside that handleSubmit? (Got to say I'm not fully confident with async await yet, so that may be the cause combined with hooks)

Thank you in advance for your help on spotting this issue!

标签： reactjsfirebaseasync-awaitreact-hooks

Answer 1

该方法createUserWithEmailAndPassword返回 type 的值，Promise<UserCredential>而 的值UserCredential没有属性名称newUser. 相反，它包含属性中的用户数据user。

问题的解决方案

const { user } = await auth.createUserWithEmailAndPassword(email, password);

PS - 虽然上面的代码解决了这个问题，但我仍然非常不确定为什么additionalData（第二个参数）的值是在使用值（未定义）作为第一个参数和一个字符串值作为第二个参数调用undefined时。createUserProfileDocumentnewUserdisplayName

如果有人知道这种行为的原因，请告诉我并随时编辑答案。