reactjs - 在 firebase.utils.js 的函数内传递 props

Question

我有一个奇怪的问题，但我真的无法解决它，而且我已经绊倒了好几天了。

这里我有一个功能组件 - 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
  );
};

这是 firebase.utils 中的“createUserProfileDocument”函数:

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

这段代码的问题是，当我提交表单时，它会触发调用 createUserProfileDocument 函数的 handleSubmit 。此时，它正确获取了 userAuth 对象，但没有获取任何 'additionalData' 属性，显示未定义..

这可能是什么原因？我可以确认 form 和 handleChange 都能正常工作，并使用插入的值更新用户 Hook 状态

我在 SignUp 组件(handleSubmit 内部)添加的 console.log 正确显示了 displayName；另一方面，firebase.utils 中的 console.logs 显示 userAuth，但没有获取这些附加数据(在本例中为 displayName)，而是未定义

这是我从 console.logs 得到的内容:

在 userAuth 上，我仍然没有得到任何 displayName，但可以检索电子邮件:

这是填写表单后保存的用户属性:

我真的不明白我在传递 Prop 这么简单的事情上做错了什么。 也许 createUserProfileDocument 函数在将 displayName 传递到该 handleSubmit 之前被调用？ (不得不说我对异步等待还没有完全信心，所以这可能是与钩子(Hook)结合的原因)

预先感谢您帮助发现此问题!

Answer 1

方法 createUserWithEmailAndPassword 返回 Promise<UserCredential> 类型的值和 UserCredential 的值没有属性名称 newUser 。它包含属性 user 中的用户数据。相反。

问题的解决方案

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

附注- 虽然上面的代码解决了问题，但我仍然非常不确定为什么 additionalData 的值(第二个参数)是 undefined当createUserProfileDocument被调用值 newUser (未定义)作为第一个参数和 displayName一个字符串值作为第二个参数。

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