Javascript 使用引导和Firebase的模式中的身份验证错误

我正在利用react bootstrap和firebase创建一个允许登录的模式-我已经完全实现了一个创建用户组件，但是当我尝试使用一个模式来处理我的登录错误时。非常感谢您的帮助

未捕获（承诺中）TypeError:无法分解“event.target.elements”的属性“email”，因为它未定义

import React, { useState, useCallback, useContext } from 'react';
import './Homepage.css';
import { Button, Modal, Form } from 'react-bootstrap';
import { Link, Redirect } from 'react-router-dom';


// Firebase Credentials
import app from '../firebase'
import { AuthContext } from '../Auth'

const Homepage = ({ history }) => {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const handleLogin = useCallback(
    async (event)=> {
      event.preventDefault();
      const { email, password } = event.target.elements;
      try {
        await app.auth().signInWithEmailAndPassword(email.value, password.value);
        history.push('/generate')
      }catch(error){
        alert(error);
      }
    },[history]
    );
    
    const { currentUser } = useContext(AuthContext);
    
    if (currentUser) {
      return 
    }
    
    return (
        <div className='welcomeContainer'>
            <h1 className='welcomeBanner'>Resu.Me</h1>
            <h4 className='welcomeMessage'>
                Resu.me is the easiest solution for cover letters and resumes.
                <br></br> Simply input your credentials and contact information - We
                handle the rest!
            </h4>
            <Link className='genLeadButton' to='/generate'>
                <Button>Let's make a Resume</Button>
            </Link>

            <Button onClick={handleShow} className='loginButton'>
                Log In to Resu.me
            </Button>
            {/* <h2 className="servicesBanner">Score the job you deserve with the help of our tools</h2> */}

            <h2 className='servicesContainer serviceA'>PLACEHOLDER A</h2>
            <h2 className='servicesContainer serviceB'>PLACEHOLDER B</h2>
            <h2 className='servicesContainer serviceC'>PLACEHOLDER C</h2>



            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>Login</Modal.Title>
                </Modal.Header>
                
        <Modal.Body>
                    <Form>
                        <Form.Group controlId='formBasicEmail'>
                            <Form.Label className='label'>Email Address</Form.Label>
                            <Form.Control
                                name='email'
                                type='email'
                                placeholder="Login email"
                            />
                        </Form.Group>

                        <br></br>

                        <Form.Group controlId='formBasicPassword'>
                            <Form.Label>Password</Form.Label>
                            <Form.Control
                                name='password'
                                type='password'
                                placeholder='Password'
                            />
                        </Form.Group>
                </Form>
                    </Modal.Body>
                <Modal.Footer>
                    <Button variant='secondary' type='submit' onClick={handleLogin}>
                        Login
                    </Button>
                </Modal.Footer>
            </Modal>
        </div>
    );
};

export default Homepage;

import React，{useState，useCallback，useContext}来自“React”；
导入“/Homepage.css”；
从“react bootstrap”导入{Button，Modal，Form}；
从“react router dom”导入{Link，Redirect}；
//Firebase凭据
从“../firebase”导入应用程序
从“../Auth”导入{AuthContext}
const主页=（{history}）=>{
const[show，setShow]=useState（false）；
const handleClose=（）=>setShow（false）；
常量handleShow=（）=>setShow（true）；
const handleLogin=useCallback(
异步（事件）=>{
event.preventDefault（）；
const{email，password}=event.target.elements；
试一试{
等待app.auth（）.signiWithEmailandPassword（email.value，password.value）；
history.push（“/generate”）
}捕获（错误）{
警报（错误）；
}
}，[历史]
);
const{currentUser}=useContext（AuthContext）；
如果（当前用户）{
返回
}
返回(
结果我
Resu.me是求职信和简历最简单的解决方案。


只需输入您的凭据和联系信息-我们
处理其余的事情！
让我们做一份简历
登录Resu.me
{/*借助我们的工具为您应得的工作打分*/}
占位符A
占位符B
占位符C
登录
电子邮件地址



密码
登录
);
};
导出默认主页；

将通过这两行中的输入id（

controlId

用于react引导表单）映射该值

<Form.Group controlId='formBasicEmail'>
<Form.Group controlId='formBasicPassword'>

或

<Form.Group controlId='formBasicEmail'>
<Form.Group controlId='formBasicPassword'>

const { formBasicEmail, formBasicPassword } = event.target.elements;

<Form.Group controlId='email'>
<Form.Group controlId='password'>