刚接触React，尝试在Firebase上建立一个基本的身份验证流程，但是一直收到上面的错误，后面跟着The above error occurred in the <Login> component。知道我哪里出错了吗？在我将const {login} = useAuth()添加到Login.js之前，一切都很正常。

• • 索引. js**

ReactDOM.render(
    <React.StrictMode>
      <BrowserRouter>
         <App />
      </BrowserRouter>
    </React.StrictMode>,
    document.getElementById('root'),
  );

• • 应用程序js**

function App() {
  return (
      <Routes>
        <Route path="/" element={<Landing />} />
        <Route path="/login" element = {<Login />} />
      </Routes>
  )
}

export default App;

• • 登录. js**

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

export function Login() {
  const emailRef = useRef()
  const passwordRef = useRef()
  const {login} = useAuth()

  async function handleSubmit(e) {
    e.preventDefault()

    try {
      await login(emailRef.current.value, passwordRef.current.value)
    } catch {
      console.log("Failed to log in")
    }
    console.log("Success!")
  }

  return (
    <div>
      <Card>
        <Card.Body>
          <h2 className="text-center mb-4">Log In</h2>
          <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>
            <Button className="w-100" type="submit">
              Log In
            </Button>
          </Form>
        </Card.Body>
      </Card>
    </div>
  )
}

• • 身份验证上下文. 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()

  function login(email, password) {
    return auth.signInWithEmailAndPassword(email, password)
  }

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      setCurrentUser(user)
    })

    return unsubscribe
  }, [])

  const value = {
    currentUser,
    login
  }

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  )
}