reactjs - React Firebase 创建用户帐户

Question

我正在开展一个小组项目，并且在使用 Firebase 身份验证从注册表单创建文档以将新文档保存在 Firestore 中时遇到问题。请帮助非常新的火力基地。我看到的错误是 TypeError: Cannot read property 'value' of undefined，并且在其他情况下，这些值的类型不受支持。

import React, {
  useCallback
} from "react";
import {
  withRouter
} from "react-router";
import app from "../firebase";

const Signup = ({
  history
}) => {
  const handleSignUp = useCallback(
    async(event) => {
      event.preventDefault();
      const {
        email,
        password,
        prefix,
        firstname,
        lastname,
        occupation,
        employer,
        street,
        suite,
        city,
        state,
        zip,
      } = event.target.elements;
      try {
        await app
          .auth()
          .createUserWithEmailAndPassword(email.value, password.value)
          .then(() => {
            const professional = currentUser;
            app
              .firestore()
              .collection("professional")
              .doc(app.auth().currentUser.uid)
              .set({
                name: {
                  prefix: prefix.value,
                  firstname: firstname.value,
                  lastname: lastname.value,
                },
                occupation: occupation.value,
                employer: employer.value,
                address: {
                  street: street.value,
                  suite: suite.value,
                  city: city.value,
                  state: state.value,
                  zip: zip.value,
                },
              });
          });
        history.push("/");
      } catch (error) {
        alert(error);
      }
    }, [history]
  );

  return ( <
    div >
    <
    h1 > Sign up < /h1> <
    form onSubmit = {
      handleSignUp
    } >
    <
    label >
    Email <
    input name = "email"
    type = "email"
    placeholder = "Email" / >
    <
    /label> <
    label >
    Password <
    input name = "password"
    type = "password"
    placeholder = "Password" / >
    <
    /label> <
    label name = "prefix" >
    Credentials <
    input type = "text"
    placeholder = "MD" / >
    <
    /label> <
    label name = "firstname" >
    First Name <
    input type = "text"
    placeholder = "John" / >
    <
    /label> <
    label name = "lastname" >
    Last Name <
    input type = "text"
    placeholder = "Smith" / >
    <
    /label> <
    label name = "occupation" >
    Occupation <
    input type = "text"
    placeholder = "Occupation" / >
    <
    /label> <
    label name = "employer" >
    Employer <
    input type = "text"
    placeholder = "Employer" / >
    <
    /label> <
    label name = "street" >
    Street address <
    input type = "text"
    placeholder = "Street address" / >
    <
    /label> <
    label name = "suite" >
    Suite# <
    input type = "text"
    placeholder = "Suite #" / >
    <
    /label> <
    label name = "city" >
    City <
    input type = "text"
    placeholder = "City" / >
    <
    /label> <
    label name = "state" >
    State <
    input type = "text"
    placeholder = "State" / >
    <
    /label> <
    label name = "zip" >
    ZIP code <
    input type = "text"
    placeholder = "ZIP code" / >
    <
    /label> <
    button type = "submit" > Sign Up < /button> <
    /form> <
    /div>
  );
};

export default withRouter(Signup);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

标签： reactjsgoogle-cloud-firestorefirebase-authentication