React页面添加表单提交逻辑后渲染空白问题排查求助

你在函数式React组件中混用了仅类组件支持的this.state、this.setState语法，函数组件中不存在指向组件实例的this，调用this.state会直接抛出未捕获的JS错误，导致组件渲染中断，页面空白。

• 状态管理逻辑混用了类组件API和Hook，你已经导入了useState，应使用Hook管理表单状态
• 所有this.state、this.setState、this.handleSubmit这类调用都会抛出错误
• SSO姓名拼接逻辑错误，props.preferredLastName应为props.blue.preferredLastName
• axios的then回调写法错误，会导致无论请求是否成功都会立刻跳转页面

import React, { useState } from "react";
import axios from "axios";
import { useHistory } from "react-router-dom";
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 } from "@material-ui/core/styles";
import "../../../styles/AddMembershipPage.css";

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

  // 处理SSO信息
  const ssoDetails = {
    name: props.blue.preferredFirstName + " " + props.blue.preferredLastName,
    email: props.blue.preferredIdentity,
    cnum: props.blue.uid,
    empType: "part-time"
  }

  // 用useState管理表单状态，替代this.state
  const [formData, setFormData] = useState({
    cnum: ssoDetails.cnum,
    empType: ssoDetails.empType,
    email: ssoDetails.email,
    name: ssoDetails.name,
    phone: "",
    siteList: "",
    status: ""
  });

  // 表单输入事件处理
  const handleInputChange = (e) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value,
    }));
  };

  // 表单提交处理
  const handleSubmit = (e) => {
    e.preventDefault();
    const selections = { ...formData };

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

  return (
    <div className={classes.root}>
      <AdminNav />
      {/* <Header title="Services - Admin" /> */}
      {/* <AdminAboutUsNav /> */}
      <div className="App">
        <form onSubmit={handleSubmit}>
            <h1>Join Us!</h1>
            <input value={formData.name} readOnly name="name" onChange={handleInputChange}></input>
            <input type="email" value={formData.email} readOnly name="email" onChange={handleInputChange}></input>
            <input type="hidden" value={formData.cnum} readOnly name="cnum" onChange={handleInputChange}></input>
            <input type="text" value={formData.empType} readOnly name="empType" onChange={handleInputChange}></input>
            <input type="text" placeholder="Phone Number" name="phone" value={formData.phone} onChange={handleInputChange}></input>
            <input type="text" placeholder="Site List" name="siteList" value={formData.siteList} onChange={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);

• 移除所有类组件的this相关语法，全部改用useState管理表单状态
• 修复SSO姓名拼接的属性路径错误
• 修正axios的回调逻辑，仅在请求成功后执行跳转
• 给所有可输入项添加value绑定，实现受控组件，避免表单值异常

内容的提问来源于stack exchange，提问作者gianluca