无法使用使用 firebase 创建的登录模块进行注册，并从客户端收到错误“TypeError: Cannot read property 'email' of null”

Posted 2023-02-25

【中文标题】无法使用使用 firebase 创建的登录模块进行注册，并从客户端收到错误“TypeError: Cannot read property \'email\' of null”

【英文标题】：Cannot signUp with login module created with firebase and got the error 'TypeError: Cannot read property 'email' of null' from the client sidee无法使用使用 firebase 创建的登录模块进行注册，并从客户端收到错误“TypeError: Cannot read property 'email' of null”

【发布时间】：2021-08-24 05:10:15

【问题描述】：

为了在 react 中创建用户身份验证，我使用了 firebase 身份验证模块，因此我设置了 firebase 配置文件并创建了身份验证文件并创建了注册模块以在“react-app”文件夹中创建注册页面但是当我 @987654323 @ 在我的注册模块中，我在客户端收到错误消息 'TypeError: Cannot read property 'email' of null'。当我在 signup.js 文件的行号 36 中编码 ``` currentUser.email`` 时发生此错误。

所以我放弃了这三个文件，这三个文件负责创建注册页面

1.SignUp.js 文件

import React,  useRef, useState  from 'react'
import  Form, Button, Card, Alert from 'react-bootstrap'
import  useAuth   from '../contexts/AuthContext'  

const SignUp = () => 
    const emailRef = useRef()
    const passwordRef = useRef()
    const passwordConfirmRef = useRef()
    const  Signup, currentUser  = useAuth()
    const [error, setError] = useState('')
    const [loading, setLoading] = useState(false)

   async function handleSubmit(e) 
        e.preventDefault()

        if(passwordRef.current.value !== passwordConfirmRef.current.value)
            return setError('Password do not match')
        

        try 
            setError('')
            setLoading(true)
            await Signup(emailRef.current.value, passwordRef.current.value)
         catch 
            setError('Failed to create an account')
        

        setLoading(false)
    

    return (
        <>
            <Card>
                <Card.Body>
                <h2 className="text-center mb-4">Sign Up</h2>
                 currentUser.email
                error && <Alert variant='danger'>error</Alert>
                <Form onSubmit=handleSubmit>
                    <Form.Group id="email">
                        <Form.Label>Email</Form.Label>
                        <Form.Control type="email" ref=emailRef
                        required />
                    </Form.Group>

                    <Form.Group id="password">
                        <Form.Label>Password</Form.Label>
                        <Form.Control type="password" ref=passwordRef
                        required />
                    </Form.Group>

                    <Form.Group id="password-confirm">
                        <Form.Label>Password Confirmation</Form.Label>
                        <Form.Control type="password" ref=passwordConfirmRef
                        required />
                    </Form.Group> <br></br>
                    <Button  disabled=loading type="submit" className="w-100" type="submit">Sign Up</Button>
                </Form>
                </Card.Body>
            </Card>
            <div className="w-100 text-center mt-2"> 
                Already have an account? Log In
            </div>
        </>
    )


export default SignUp

2。 AuthContext.js 文件

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)
    

        useEffect(() => 
           const unsubscribe =  auth.onAuthStateChanged(user => 
            setCurrentUser(user)
            setLoading(false)
            )

            return unsubscribe
        , [])
   
    const value = 
        currentUser,
        signup
    
    return (
        <AuthContext.Provider value=value>
            !loading && children
        </AuthContext.Provider>
    )

3. App.js 文件

import React from 'react'
//import 'antd/dist/antd.css'
import Signup from './Screens/SignUp'
import Header from './components/Header'
import  Container  from 'react-bootstrap'
import  AuthProvider  from './contexts/AuthContext'
function App() 
  return (
    <>
    <Header />
    <AuthProvider>
    <Container className="d-flex align-items-center justify-content-center" style= minHeight: '100vh' >
    
    <div className='w-100' style= maxWidth: '400px'>
    <Signup />
    </div>
    </Container>
    </AuthProvider>
    
    </>
  );


export default App;

我在客户端遇到的错误是这样的：

【问题讨论】：

currentUser 为空。检查一下

你能给我sn-p我在哪里换线。

【参考方案1】：

如果没有用户登录，则currentUser 为空。您应该检查用户是否自己登录。

<h2 className="text-center mb-4">Sign Up</h2>
 currentUser ? currentUser.email : "No user"

尝试如上所示重构您的代码。如果没有用户登录，它会显示“没有用户”。

【讨论】：

是的，现在代码可以工作，但我现在无法注册我在客户端收到错误无法创建帐户。

@AbhijeetKujur 什么错误？你能用完整的细节更新你的问题吗？