React sayfası boş işleniyor [duplicate]

Buna sahibim, tüm tepki sayfam:

 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);

ancak, bu sayfayı çalıştırmayı denediğimde, sadece boş görünür. Ekledikten sonra bunu yapmaya başladı const handleInputChange, ve const handleSubmit kod için. Temel olarak sadece bir form göndermeye çalışıyorum ve hayal ettiğimden daha karmaşık. Az önce bahsettiğim 2 şeyi eklemeden önce, sayfa mükemmel çalışıyordu. ama şimdi, bunu anlayamıyorum ve bunu düzeltmek için bazı rehberlik/yardımları gerçekten kullanabilirim. herhangi bir fikir?