reactjs - 构建 firebase/react 应用程序时的空白页

Question

我是新来的反应和 firbase。因此，我正在尝试通过电子邮件和密码构建登录/注册页面，主要使用我从各种教程中学到的东西。

现在它只是注册页面，您应该在其中输入您的电子邮件和密码，确认您的密码并注册。

每次我运行npm start应用程序编译成功，没有警告，但我收到一个空白页。

SignUp.js 组件如下所示：

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


export default function SignUp() {
    const emailRef = useRef()
    const passwordRef = useRef()
    const passwordConfirmRef = useRef()
    const { signup } = 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(
                'Passwörter stimmen nicht überein')
        }
        try {
            setError('')
            setLoading(true)
            await signup(emailRef.current.value, passwordRef.current.value)
        } catch {
            setError('Registrierung fehlgeschlagen!')
        }
        
        setLoading(false)
    }

    return (
        <>
            <Card>
                <Card.Body>
                    <h2 className="text-center mb-4">Registrierung</h2>
                    {error && <Alert variant='danger'>{error}</Alert>}
                    <Form onSubmit={handleSubmit}>
                        <Form.Group id="email">
                            <Form.Label>E-Mail</Form.Label>
                            <Form.Control type="email" ref={emailRef} required/>
                        </Form.Group>
                        <Form.Group id="password">
                            <Form.Label>Passwort</Form.Label>
                            <Form.Control type="password" ref={passwordRef} required/>
                        </Form.Group>
                        <Form.Group id="password-confirm">
                            <Form.Label>Passwort Bestätigung</Form.Label>
                            <Form.Control type="password" ref={passwordConfirmRef} required/>
                        </Form.Group>
                        <Button disabled={loading} className="w-100" type="sumbit">
                            Registrieren
                        </Button>
                    </Form>
                </Card.Body>
            </Card>
            <div className="w-100 text-center mt-2">
                Bereits registriert? Zum Login
            </div>
        </>
    )
}

用于身份验证的 Context AuthContext.js 如下所示：

import React, { useContext, useState, useEffect } from 'react'
import { auth } from '../FireConfig/fire'

const AuthContext = React.createContext()

export function useAuth(){
    return useContext(AuthContext)
}

export function AuthProvider({ children }) {
    const [currentUser, setCurrentUser] = useState()
    const [loading, setLoading] = useState(true)

    //Create new User on signUp
    function signup(email, password){
       return auth.createUserWithEmailAndPassword(email, password)
    }

    //Listener for changes in User status -> sets current User for further usage
    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>
    )
}

App.js 看起来像这样：

import React from "react";
import "./App.css";
import { Container } from "react-bootstrap";
import SignUp from "./components/common/SignUp";
import { AuthProvider } from "./contexts/AuthContext";

function App() {
  /* const classes = useStyles(); */

  return (
    <AuthProvider>  
        <Container 
        className="d-flex align-items-center justify-content-center"
        style={{ minHeight: "100vh"}}
        >
        <div className="w-120" style={{ maxWidth: "400px"}}>
          <SignUp/>
        </div>
        
      </Container>
    </AuthProvider>
  )
}

export default App;

我很感激任何帮助。请温柔一点；）

标签： reactjsnpmfirebase-authentication