时间戳

首页 > 解决方案 > 无法读取未定义的属性（读取“updateProfile”）

reactjs - 无法读取未定义的属性（读取“updateProfile”）

问题描述

我目前正在使用 react-redux 框架开发一个项目，我必须创建一个登录页面，并且我必须保存这些登录信息......为此我必须抓住价值......但我被困在这里尽管。

这是代码，

功能登录（）{

const [email, setEmail]=useState("");
const [password, setPassword]=useState("");
const [name, setName]=useState("");
const [profilePic, setProfilePic]=useState("");
const dispatch= useDispatch();
const logintoApp =(e) =>{
    e.preventDefault();
    auth.signInWithEmailAndPassword(email,password)
    .then((userAuth)=>{
        dispatch(login({
            email:userAuth.user.email,
                   uid:userAuth.user.uid,
                   displayName:userAuth.user.displayName,
                   profileUrl:userAuth.user.photoURL,
        }));     
    }).catch((error)=>alert(error));
};
const register =() =>{
    if(!name){
        return alert("Please enter a full name!")
    }
    auth.createUserWithEmailAndPassword(email,password)
    .then((userAuth)=>{
        userAuth.user.updateProfile({  <<====here is the problem=====>>
            displayName:name,
            photoURL:profilePic,
            
        })
        
        .then(()=>{
            dispatch(
                login({
                   email:userAuth.user.email,
                   uid:userAuth.user.uid,
                   displayName:name,
                   photoUrl:profilePic,
                })
            );
        });
    })
    .catch((error)=>alert(error.message));
};
return (
    <div className='login'>
      <img
      src="https://www.nicepng.com/png/detail/381-3813396_linkedin-ads-are-great-for-b2b-marketing-linkedin.png"
      alt=""
      />
      <form>
          <input value={name} onChange={(e)=>setName(e.target.value)} placeholder="Full name (required if registering)" type="text"/>
          <input value={profilePic} onChange={(e)=>setProfilePic(e.target.value)} placeholder="Profile pic URL (optional)" type="text"/>
          <input value={email} onChange={(e)=>setEmail(e.target.value)} placeholder="Email" type="email"/>
          <input value={password} onChange={(e)=>setPassword(e.target.value)} placeholder="Password" type="password"/>
          <button type='submit' onClick={logintoApp}>Sign In</button>
      </form>
      <p>Not a member? {' '}
          <span className="login_register" onClick={register}>Register now</span>
      </p>
    </div>
)

}

导出默认登录

有人知道如何解决这个问题吗？

标签： reactjsredux

解决方案

您可以尝试从按钮中删除表单和 type=submit 吗？这个 type=submit 所做的是提交表单并刷新它，因此您要传递给 API 的数据变得未定义

          <input value={name} onChange={(e)=>setName(e.target.value)} placeholder="Full name (required if registering)" type="text"/>
          <input value={profilePic} onChange={(e)=>setProfilePic(e.target.value)} placeholder="Profile pic URL (optional)" type="text"/>
          <input value={email} onChange={(e)=>setEmail(e.target.value)} placeholder="Email" type="email"/>
          <input value={password} onChange={(e)=>setPassword(e.target.value)} placeholder="Password" type="password"/>
          <button type='button' onClick={logintoApp}>Sign In</button>

推荐阅读