반응하는 페이지를 렌더링 빈[중복]

나는 이 나의 전체 반응 페이지:

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

그러나,을 실행하려고 할 때 이 페이지는,그것은 단지 보여줍니다 비어 있습니다. 그것은 일을 시작 이후에 추가 const handleInputChange고 const handleSubmit 하는 코드입니다. 저는 기본적으로 제공하는 혜택에 대한 액세스를 제공 형태로,그리고 그것은 더 복잡한 다음 내가 상상했던 것. 을 추가하기 전에 이들 2 일 앞서 언급,페이지가 완벽하게 작동한다. 그러나 지금,나는 그것을 파악,그리고 정말로 사용할 수 있습 안내/하는 데 도움이 문제를 해결하기 위해 노력니다. 어떤 아이디어가?