Firebase 9 updateProfile不更新授权用户

Question

我使用9在一个react应用程序中。我有一个注册表格，名字，电子邮件和密码输入。当表单提交时，我需要创建一个具有Firebase的授权用户，并立即更新新用户的名称和配置文件图片。

我使用两个Firebase auth函数- createUserWithEmailAndPassword()和updateProfile()。提交表单时总是会创建新用户，但概要文件更新仅偶尔发生一次。当个人资料更新成功的时候，我还没能准确地指出这些案例。

对我错过了什么有什么想法吗？希望得到一些反馈和指导。谢谢!

这是注册页面的代码。

import { useState, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import {
  StyledHeader,
  StyledFooter,
  StyledDropdown,
  StyledForm,
} from '../styles';
import {
  getAuth,
  createUserWithEmailAndPassword,
  updateProfile,
} from 'firebase/auth';
import { ShortFooter, LanguageSelect, Form } from '../components';
import { logo, p1, p2, p3, p4, p5 } from '../assets';

const SignUp = ({ children }) => {
  const [firstName, setfirstName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isFirstNameEmpty, setIsFirstNameEmpty] = useState(true);
  const [isEmailEmpty, setIsEmailEmpty] = useState(true);
  const [isPasswordEmpty, setIsPasswordEmpty] = useState(true);
  const [error, setError] = useState('');
  const [checked, setChecked] = useState(true);
  const [isShown, setIsShown] = useState(true);
  const isInvalid = firstName === '' || email === '' || password === '';
  const navigate = useNavigate();
  const userProfileImgs = [p1, p2, p3, p4, p5];

  useEffect(() => {
    setTimeout(() => {
      // ️ scroll to top on page load
      window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
    }, 100);
  }, []);

  const handlefirstNameChange = (firstName) => {
    if (firstName.length !== 0) {
      setIsFirstNameEmpty(false);
    } else {
      setIsFirstNameEmpty(true);
    }
  };

  const handleEmailChange = (email) => {
    if (email.length !== 0) {
      setIsEmailEmpty(false);
    } else {
      setIsEmailEmpty(true);
    }
  };

  const handlePasswordChange = (password) => {
    if (password.length !== 0) {
      setIsPasswordEmpty(false);
    } else {
      setIsPasswordEmpty(true);
    }
  };

  const handleCheckbox = () => {
    setChecked((checked) => !checked);
  };

  const handleLearnMore = (e) => {
    e.preventDefault();
    setIsShown((isShown) => !isShown);
  };

  const handleSignUp = async (e) => {
    e.preventDefault();

    try {
      // firebase work!
      const auth = getAuth();
      let { user } = await createUserWithEmailAndPassword(
        auth,
        email,
        password
      );
      console.debug(`User ${user.uid} created`);

      // updating the user's profile with their first name and a random profile image
      await updateProfile(user, {
        displayName: firstName,
        photoURL:
          userProfileImgs[Math.floor(Math.random() * userProfileImgs.length)],
      });
      console.debug(`User profile updated`);

      // navigate to the profile page
      navigate('/profile');
    } catch (e) {
      if (e.message === 'Firebase: Error (auth/email-already-in-use).') {
        setError('That email is already in use, please try again.');
      }
    }
  };

  return (
    <>
      <StyledHeader height="120">
        <div className="header__background">
          <div className="header__frame">
            <div>
              <Link to="/">
                <img className="header__logo" src={logo} alt="Netflix Logo" />
              </Link>
            </div>
          </div>
          <form onSubmit={handleSignUp} className="form__container">
            <StyledForm padding="20px 68px 40px">
              <Form
                error={error}
                isEmailEmpty={isEmailEmpty}
                email={email}
                setEmail={setEmail}
                handleEmailChange={handleEmailChange}
                isPasswordEmpty={isPasswordEmpty}
                password={password}
                setPassword={setPassword}
                handlePasswordChange={handlePasswordChange}
                isInvalid={isInvalid}
                checked={checked}
                handleCheckbox={handleCheckbox}
                handleLearnMore={handleLearnMore}
                isShown={isShown}
                isFirstNameEmpty={isFirstNameEmpty}
                firstName={firstName}
                setfirstName={setfirstName}
                handlefirstNameChange={handlefirstNameChange}
                method="post"
              />
            </StyledForm>
          </form>

          <div className="signIn__footer-container">
            <div className="signIn__footer-background">
              <StyledFooter
                backgroundColor="transparent"
                padding="10px 70px 40px 70px"
              >
                <ShortFooter>
                  <StyledDropdown>
                    <LanguageSelect />
                  </StyledDropdown>
                </ShortFooter>
              </StyledFooter>
            </div>
          </div>
        </div>
        {children}
      </StyledHeader>
    </>
  );
};

export default SignUp;

这就是我在控制台中遇到的错误。错误

Answer 1

根据我的应用程序的设置方式，我最终决定完全删除photoURL属性，因为它可以在应用程序的其他地方定义。经过测试，只有我的一张照片起作用了。这就是为什么我经历了完整的个人资料更新，有时是因为每次新用户注册时都会随机选择图片。最后，我坚持这个图像作为默认图像。

正如@adsy所提到的，我的配置文件更新没有持续进行，因为某些配置文件图像超出了该属性允许的输入体长度。文档中的示例显示了一个43个字符的链接，但没有其他信息。问题中的配置文件图像的路径比这短得多，所以我仍然需要一些理解。

经过一番研究后，我并没有碰到设定的最大限度。现在可以联系谷歌开发人员的支持团队了。如果任何人有此属性的允许输入体长度的信息，请在此帖子上自由地共享它。

谢谢!

 const handleSignUp = async (e) => {
    e.preventDefault();

    try {
      // firebase work!
      const auth = getAuth();
      let { user } = await createUserWithEmailAndPassword(
        auth,
        email,
        password
      );
      console.debug(`User ${user.uid} created`);

      // updating the user's profile with their first name
      await updateProfile(user, {
        displayName: firstName,
      });
      console.debug(`User profile updated`);

      // navigate to the profile page
      navigate('/profile');
    } catch (e) {
      if (e.message === 'Firebase: Error (auth/email-already-in-use).') {
        setError('That email is already in use, please try again.');
      }
    }
  };