Reactjs createUserWithEmailAndPassword失败，"；电邮；必须是有效字符串
我试图根据教程使用firebase创建一个新用户，不幸的是，我遇到了一个错误： 消息：“createUserWithEmailAndPassword失败：第一个参数“email”必须是有效字符串 电子邮件输入有一些问题，当我有我的电子邮件控制台，我得到未定义 有人知道原因是什么吗Reactjs createUserWithEmailAndPassword失败，"；电邮；必须是有效字符串,reactjs,firebase,firebase-authentication,Reactjs,Firebase,Firebase Authentication,我试图根据教程使用firebase创建一个新用户，不幸的是，我遇到了一个错误： 消息：“createUserWithEmailAndPassword失败：第一个参数“email”必须是有效字符串 电子邮件输入有一些问题，当我有我的电子邮件控制台，我得到未定义 有人知道原因是什么吗 import React, { useState, useRef } from 'react'; import { Input, Button, StrongPasswordInput } from 'react-ra
import React, { useState, useRef } from 'react';
import { Input, Button, StrongPasswordInput } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faKey } from '@fortawesome/free-solid-svg-icons';
import { useAuth } from '../contexts/AuthContext';
import { useHistory } from 'react-router-dom';
const SignUp = () => {
const [ value, setValue ] = useState('');
const emailRef = useRef();
const passwordRef = useRef();
const nameRef = useRef();
const { signup, currentUser } = useAuth();
const [ loading, setLoading ] = useState(false);
const history = useHistory();
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
await signup(emailRef.current.value, passwordRef.current.value);
history.push('/');
setLoading(false);
};
function handleOnChange(event) {
setValue(event.target.value);
}
function getStrength() {
const { length } = value;
if (length === 0) {
return undefined;
}
if (length <= 3) {
return 'weak';
}
if (length > 3 && length < 8) {
return 'average';
}
return 'strong';
}
const passwordState = getStrength();
const inputStyles = {
minWidth: 300,
margin: 15
};
const containerStyles = {
minWidth: 300,
margin: 15
};
const divStyle = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
marginTop: 150
};
return (
<div>
<div style={divStyle}>
{JSON.stringify(currentUser)}
<form onSubmit={handleSubmit}>
<Input
name="name"
label="username"
placeholder="Placeholder text"
type="text"
ref={nameRef}
required
className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
style={containerStyles}
/>
<Input
name="email"
label="email"
placeholder="inputEmail@gmail.com"
type="email"
ref={emailRef}
required
className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
style={inputStyles}
/>
<StrongPasswordInput
name="password"
id="strong-password-input-3"
label="pass"
placeholder="Placeholder text"
bottomHelpText="Your password must be at least 8 characters long."
className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
style={containerStyles}
value={value}
ref={passwordRef}
required
passwordState={passwordState}
onChange={handleOnChange}
icon={<FontAwesomeIcon icon={faKey} />}
/>
<div className="rainbow-align-content_center">
<Button
shaded
label="Reg"
variant="brand"
disabled={loading}
type="submit"
className="rainbow-m-around_medium rainbow-align-content_center"
/>
</div>
</form>
</div>
</div>
);
};
export default SignUp;
import React，{useState，useRef}来自“React”；
从'react rainbow components'导入{Input，Button，StrongPasswordInput}；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“@fortawesome/free solid svg icons”导入{faKey}；
从“../Context/AuthContext”导入{useAuth}；
从'react router dom'导入{useHistory}；
常量注册=（）=>{
const[value，setValue]=使用状态（“”）；
const emailRef=useRef（）；
const passwordRef=useRef（）；
const nameRef=useRef（）；
const{signup，currentUser}=useAuth（）；
const[loading，setLoading]=useState（false）；
const history=useHistory（）；
const handleSubmit=async（e）=>{
e、 预防默认值（）；
设置加载（真）；
等待注册（emailRef.current.value、passwordRef.current.value）；
历史推送（“/”）；
设置加载（假）；
};
功能更改（事件）{
设置值（event.target.value）；
}
函数getStrength（）{
常量{length}=值；
如果（长度==0）{
返回未定义；
}
如果（长度3和长度<8）{
返回“平均值”；
}
返回“强”；
}
const passwordState=getStrength（）；
常量输入样式={
最小宽度：300，
差额：15
};
常量集装箱样式={
最小宽度：300，
差额：15
};
常量divStyle={
显示：“flex”，
对齐项目：“居中”，
为内容辩护：“中心”，
flexDirection:'列'，
玛金托普：150
};
返回(
{JSON.stringify（currentUser）}
);
};
导出默认注册；
import React, { useContext, useState, useEffect } from "react"
import { auth } from "../firebase"
const AuthContext = React.createContext()
export function useAuth() {
return useContext(AuthContext)
}
export function AuthProvider({ children }) {
const [currentUser, setCurrentUser] = useState()
const [loading, setLoading] = useState(true)
function signup(email, password) {
return auth.createUserWithEmailAndPassword(email, password)
}
function login(email, password) {
return auth.signInWithEmailAndPassword(email, password)
}
function logout() {
return auth.signOut()
}
function resetPassword(email) {
return auth.sendPasswordResetEmail(email)
}
function updateEmail(email) {
return currentUser.updateEmail(email)
}
function updatePassword(password) {
return currentUser.updatePassword(password)
}
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(user => {
setCurrentUser(user)
setLoading(false)
})
return unsubscribe
}, [])
const value = {
currentUser,
login,
signup,
logout,
resetPassword,
updateEmail,
updatePassword
}
return (
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
)
}
从“React”导入React，{useContext，useState，useEffect}
从“./firebase”导入{auth}
const AuthContext=React.createContext（）
导出函数useAuth（）{
返回useContext（AuthContext）
}
导出函数AuthProvider（{children}）{
const[currentUser，setCurrentUser]=useState（）
常量[loading，setLoading]=useState（true）
功能注册（电子邮件、密码）{
返回auth.createUserWithEmailAndPassword（电子邮件，密码）
}
功能登录（电子邮件、密码）{
使用email和password（电子邮件，密码）返回身份验证登录
}
函数注销（）{
返回auth.signOut（）
}
功能重置密码（电子邮件）{
返回auth.sendPasswordResetEmail（电子邮件）
}
功能更新邮件（电子邮件）{
返回currentUser.updateEmail（电子邮件）
}
函数updatePassword（密码）{
返回currentUser.updatePassword（密码）
}
useffect（（）=>{
const unsubscribe=auth.onAuthStateChanged（用户=>{
setCurrentUser（用户）
设置加载（错误）
})
退订
}, [])
常量值={
当前用户，
登录，
报名，
注销，
重置密码，
更新邮件，
更新密码
}
返回(
{！正在加载（&children}
)
}