React类组件转函数组件后return不显示页面数据问题求解

核心错误点 #

• 函数组件不存在this上下文，原有this.state、this.setState语法不适用，需改用useState Hook 管理表单状态
• useStyles 调用顺序错误，必须先定义自定义Hook再调用，否则直接抛出异常导致组件无法渲染
• 表单提交事件绑定的handleSubmit方法未定义，运行时会触发报错
• 未对props.blue做空值兼容，当redux返回的blue数据为空时，访问属性会直接抛出异常阻塞渲染
• 存在未使用的冗余导入项，可清理避免打包体积冗余

修正后完整代码 #

import "../../../styles/services.css";
import React, { useState } from "react";
import { connect } from 'react-redux';
import { makeStyles } from "@material-ui/core/styles";
import { useHistory } from "react-router";

import { setNavTabValue } from '../../../store/actions/navTab';
import UserNav from "../../../components/user/UserNav";
import Header from "../../../components/app/Header";

// useStyles 定义放在组件外部/内部最顶部均可，必须保证先定义后调用
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
}));

const AddMembershipPage = (props) => {
  const history = useHistory();
  const classes = useStyles();
  
  // 空值兼容避免报错
  const ssoDetails = props.blue || {};
  const myCnum = ssoDetails.uid || '';
  const empType = "part-time";
  const email = ssoDetails.preferredIdentity || '';
  const name = `${ssoDetails.preferredFirstName || ''} ${ssoDetails.preferredLastName || ''}`;

  // 用useState管理表单状态
  const [formState, setFormState] = useState({
    cnum: myCnum,
    empType: empType,
    email: email,
    name: name,
    phone: "",
    siteList: "",
    status: ""
  });

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

  // 补充表单提交逻辑
  const handleSubmit = (e) => {
    e.preventDefault();
    // 此处替换为原类组件中的提交逻辑，例如调用接口提交表单数据
    console.log('提交的表单数据：', formState);
    // 如果提交后需要跳转可以用 history.push 实现
  }

  return (
    <div className={classes.root}>
      <UserNav />
      <Header title="Membership" />
      <div className="App">
        <div id="form-main">
          <div id="form-div">
            <form onSubmit={handleSubmit} className="form">
              <p className="cnum">
                <input
                  name="cnum"
                  type="hidden"
                  className="validate[required,custom[email]] feedback-input"
                  id="cnum"
                  placeholder={formState.cnum}
                  value={formState.cnum}
                  onChange={handleInputChange}
                  readOnly
                />
              </p>

              <p className="email">
                <input
                  name="email"
                  type="text"
                  className="validate[required,custom[email]] feedback-input"
                  id="email"
                  placeholder={formState.email}
                  value={formState.email}
                  onChange={handleInputChange}
                  readOnly
                />
              </p>
              <p className="name">
                <input
                  name="name"
                  type="text"
                  className="validate[required,custom[email]] feedback-input"
                  id="name"
                  placeholder={formState.name}
                  value={formState.name}
                  onChange={handleInputChange}
                  readOnly
                />
              </p>
              <p className="phone">
                <input
                  name="phone"
                  type="text"
                  className="validate[required,custom[email]] feedback-input"
                  id="phone"
                  placeholder="phone"
                  value={formState.phone}
                  onChange={handleInputChange}
                />
              </p>
              <p className="siteList">
                <input
                  name="siteList"
                  type="text"
                  className="validate[required,custom[email]] feedback-input"
                  id="siteList"
                  placeholder="siteList"
                  value={formState.siteList}
                  onChange={handleInputChange}
                />
              </p> 
              <p className="status">
                <input
                  name="status"
                  type="text"
                  className="validate[required,custom[email]] feedback-input"
                  id="status"
                  placeholder="status"
                  value={formState.status}
                  onChange={handleInputChange}
                />
              </p>

              <div className="submit">
                <input type="submit" value="SEND" id="button-blue" />
                <div className="ease"></div>
              </div>
            </form>
          </div>
        </div>
      </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);

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