Réagir page est rendu vide [dupliquer]

J'ai cette, toute ma réagir page:

 import React, { useState, useEffect } from "react";
import axios from "axios";
import { useHistory } from "react-router-dom";
import { useMemo } from "react";
import { connect } from "react-redux";

import AdminNav from "../../../components/admin/AdminNav"
import AdminAboutUsNav from "../../../components/admin/AdminAboutUsNav"
import Header from "../../../components/app/Header";
import { setNavTabValue } from '../../../store/actions/navTab';

import { makeStyles, withStyles } from "@material-ui/core/styles";
import "../../../styles/AddMembershipPage.css";

const AddMembershipPage = (props) => {
  const history = useHistory();
  const [myData, setMyData] = useState({});


    let ssoDetails = {
        name: props.blue.preferredFirstName + " " + props.preferredLastName,
        email: props.blue.preferredIdentity,
        cnum: props.blue.uid,
        empType: "part-time"
    }

    this.state = {
        cnum: ssoDetails.cnum,
        empType: ssoDetails.empType,
        email: ssoDetails.email,
        name: ssoDetails.name,
        phone: "",
        // building: building,
        siteList: "",
        status: ""
    };

    const handleInputChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value,
        });
    };

    const handleSubmit = (e) => {
        e.preventDefault();

        var date = Date().toLocaleString();
        const { cnum, empType, email, name, phone, siteList, status } = this.state;

        const selections = {
            cnum: cnum,
            empType: empType,
            email: email,
            name: name,
            phone: phone,
            // building: building,
            siteList: siteList,
            status: status
        };

        axios
            .post("/newMembership", selections)
            .then(
                () => console.log("updating", selections),
                (window.location = "/admin/services")
            )
            .catch(function (error) {
                // alert(error)
                window.location = "/admin/services/new";
            });
    };


  const useStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
      backgroundColor: theme.palette.background.paper,
    },
  }));
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AdminNav />
      {/* <Header title="Services - Admin" /> */}
      {/* <AdminAboutUsNav /> */}
      <div className="App">
        <form onSubmit={this.handleSubmit}>
            <h1>Join Us!</h1>
            <input value={ssoDetails.name} readOnly name="name" onChange={this.handleInputChange}></input>
            <input type="email" value={ssoDetails.email} readOnly name="email" onChange={this.handleInputChange}></input>
            <input type="hidden" value={ssoDetails.cnum} readOnly name="cnum" onChange={this.handleInputChange}></input>
            <input type="text" value={ssoDetails.empType} readOnly name="empType" onChange={this.handleInputChange}></input>
            <input type="text" placeholder="Phone Number" name="phone" onChange={this.handleInputChange}></input>
            <input type="text" placeholder="Site List" name="siteList" onChange={this.handleInputChange}></input>
            {/* <input type="password" placeholder="Password"></input> */}
            <button type="submit">Register</button>
        </form>
      </div>
    </div>
  );
}

const mapStateToProps = (state) => {
    return {
        siteTab: state.siteTab,
        blue: state.blue
    }
}

const mapDispatchToProps = (dispatch, props) => ({
    setNavTabValue: (value) => dispatch(setNavTabValue(value))
});

export default connect(mapStateToProps, mapDispatchToProps)(AddMembershipPage);

cependant, lorsque j'essaie d'exécuter cette page, elle s'affiche en blanc. Il a commencé à faire après que j'ai ajouté const handleInputChangeet const handleSubmit pour le code. Je suis fondamentalement juste d'essayer de soumettre un formulaire, et il est plus complexes que je ne l'imaginais. Avant, j'ai ajouté ces 2 choses que je viens de mentionner, la page a été fonctionne parfaitement. mais maintenant, je ne peux pas le comprendre, et ne pouvait vraiment besoin de conseils et d'aide pour essayer de corriger cela. des idées?