页面不显示元素反应

Question

这可能无法回答，但我将尝试包含尽可能多的细节。我有一个名为 registrationForm.js 的页面，它在我的 routes.js 中设置为使用路径 /signup 呈现。它确实呈现页面，但它是空白的。当我刷新页面时，一瞬间我看到了我应该看到的所有元素，输入字段、按钮、图像。但出于某种原因，它又回到了全白页面。

这是完整的 registrationForm.js 代码！

    import React from 'react'

import './RegistrationForm.css'

import { Alert, Button, Form, Input } from 'antd'
import { AuthorizationHome } from '../models'
import { withRouter } from 'react-router-dom'
import * as routes from '../routes'
import facades from '../facades'
import firebase from 'firebase'
import { useState } from "react";
import {createCheckoutSession} from '../Stripepayment/checkout'


let firestore = firebase.firestore()

const FormItem = Form.Item

// const [firstname, setFirstName] = useState("");
// const [lastname, setLastName] = useState("");
// const [companyname, setCompanyName] = useState("");
// const [accountStatus, setAccountStatus] = useState("");

var userIDStripeSubmit = ""
class RegistrationForm extends React.Component {
  state = {
    confirmDirty: false,
  }

  
  
  onSubmit = (event) => {
    event.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (err) return
      const email = this.props.form.getFieldValue('email')
      const passwordOne = this.props.form.getFieldValue('password1')
      const firstName = this.props.form.getFieldValue('First Name')
      const lastName = this.props.form.getFieldValue('Last Name')
      const companyName = this.props.form.getFieldValue('Company Name')

      const {
        history,
      } = this.props

      AuthorizationHome.doCreateUserWithEmailAndPassword(email, passwordOne)
        .then((authUser) => facades.userFacade().doCreateUser(authUser.user.uid, email))
        // .then((authUser) => {
        //  history.push(createCheckoutSession(authUser.user.uid))
        // })
        .catch(error => {
          this.setState({'error': error})
        })



        // adding into profiledata collection


            // var userID = ""
            firebase.auth().onAuthStateChanged((user) => {
                if(user) {
                //   console.log("profile.js " + user.uid)
                //   userID = user.uid
                // userID = user.uid
                console.log(user.uid)
                userIDStripeSubmit = user.uid

                  console.log("userid inside firebase auth is" + user.uid)

                        //  var firstNameFromField = 
                        // console.log("this props : " + this.props.form.getFieldValue('First Name'))
                          firestore.collection('profiledata').doc(user.uid).set({
                            firstname: firstName,
                            lastname: lastName,
                            companyname: companyName,
                            accountStatus: "inactive",
                        })
                        .catch(error => {
                            alert(error.message);
                        });
                        createCheckoutSession(user.uid)
              }
              })
             
              // firestore collection query
                

            // setFirstName("");
            // setLastName("");
            // setCompanyName("");
            // setAccountStatus("")
    })
  }

  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }

  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password1')) {
      callback('Passwords do not match!');
    } else {
      callback();
    }
  }

  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['password2'], { force: true });
    }
    callback();
  }


  

  render() {
    const { getFieldDecorator } = this.props.form
    const { error } = this.state
    return (
      <Form onSubmit={this.onSubmit}  hideRequiredMark={true} className="registration-form" style={{ marginBottom: "0px" }}>
        { error && <Alert type="error" message={error.message}/> }

      
       
        <FormItem label="Email" colon={false} style={{ marginBottom: "0px" }}>
          {getFieldDecorator('email', {
            rules: [{
              type: 'email', message: 'Invalid email address',
            }, {
              required: true, message: 'Please input your email address',
            }],
          })(
            <Input placeholder="Enter email" />
          )}
        </FormItem>
        

{/*  */}

        <FormItem label="First Name" colon={false} style={{ marginBottom: "0px" }}>
          {getFieldDecorator('First Name', {
            rules: [{
              required: true, message: 'Please enter your First Name',
            }],
          })(
            <Input type="text" placeholder="Enter Your First Name"/>
          )}
        </FormItem>


        <FormItem label="Last Name" colon={false}  style={{ marginBottom: "0px" }}>
          {getFieldDecorator('Last Name', {
            rules: [{
              required: true, message: 'Please enter your Last Name',
            }],
          })(
            <Input type="text" placeholder="Enter Your Last Name"/>
          )}
        </FormItem>

        <FormItem label="Company Name" colon={false}  style={{ marginBottom: "0px" }}>
          {getFieldDecorator('Company Name', {
            rules: [{
              required: true, message: 'Please enter your Company Name',
            }],
          })(
            <Input type="text" placeholder="Enter Your Company Name"/>
          )}
        </FormItem>


        <FormItem label="Password" colon={false}  style={{ marginBottom: "0px" }}>
          {getFieldDecorator('password1', {
            rules: [{
              required: true, message: 'Please choose a password',
            }, {
              validator: this.validateToNextPassword,
            }],
          })(
            <Input type="password" placeholder="Enter password"/>
          )}
        </FormItem>
        <FormItem label="Confirm Password" colon={false}  style={{ marginBottom: "0px" }}>
          {getFieldDecorator('password2', {
            rules: [{
              required: true, message: 'Please confirm your password',
            }, {
              validator: this.compareToFirstPassword,
            }],
          })(
            <Input type="password" onBlur={this.handleConfirmBlur} placeholder="Confirm password" />
          )}
        </FormItem>


        {/* inserting into profiledata collection firestore */}

        

        {/* ending profiledata collection insert firestore */}
{/* 
        <FormItem label="First Name" colon={false} >
        <Input placeholder = "Enter Your First Name" style={{ maxWidth: '100%', maxHeight: '50%' , }}
        value = { firstname }
        onChange = {
            (e) => setFirstName(e.target.value)
        }/>
        </FormItem>


        <FormItem label="Last Name" colon={false}>
        <Input placeholder = "Enter Your Last Name" style={{ maxWidth: '100%', maxHeight: '50%' }}
        value = { lastname }
        onChange = {
            (e) => setLastName(e.target.value)
        }/>
        </FormItem>

        <FormItem label="Company Name" colon={false}> <
        Input placeholder = "Enter Your Company name." style={{ maxWidth: '100%', maxHeight: '50%' }}
        value = { companyname }
        onChange = {
            (e) => setCompanyName(e.target.value)
        }
        / >
        </FormItem> */}

        <FormItem>
          <Button type="primary" htmlType="submit" id="submitButton">Register</Button>
        </FormItem>
      </Form>
    );
  }
}

const WrappedRegistrationForm = Form.create()(RegistrationForm);
export default withRouter(WrappedRegistrationForm)

我是否缺少一些东西来实际渲染页面上的元素？！我所有的其他页面都渲染得很好，只是不是这个！有什么建议吗？