Javascript react中的多窗体中不显示任何内容

因此，我尝试在react中构建一个多步骤表单，我所做的第一个版本是react.Component，其中包含一个完整的表单和条件测试列表，以确定要显示哪一个。我已经决定删除它，并制作一个更好、更干净的代码，但现在，什么都没有显示

以下是处理整个多步骤的主要代码：

import React from 'react';
import {Row, Col} from 'react-bootstrap'
import {ClassCreationFormName} from './ClassCreationFormName'
import ClassCreationFormProfilePic from './ClassCreationFormProfilePic'
import ClassCreationFormEmail from './ClassCreationFormEmail'
import ClassCreationFormClass from './ClassCreationFormClass'
import ClassCreationFormWillLearn from './ClassCreationFormWillLearn'
import ClassCreationFormMaxStudent from './ClassCreationFormMaxStudent'
import ClassCreationFormToBring from './ClassCreationFormToBring'
import ClassCreationFormSchedule from './ClassCreationFormSchedule'
import ClassCreationFormLocation from './ClassCreationFormLocation'
import ClassCreationFormCost from './ClassCreationFormCost'
import ClassCreationFormTags from './ClassCreationFormTags'
import ClassCreationFormAddTxt from './ClassCreationFormAddTxt'
import ClassCreationFormStep13 from './ClassCreationFormStep13'


import './CreateClassOnBoardingForm.css';

const stepPages = [
  ClassCreationFormName,
  /*ClassCreationFormProfilePic,
  ClassCreationFormEmail,
  ClassCreationFormClass,
  ClassCreationFormWillLearn,
  ClassCreationFormMaxStudent,
  ClassCreationFormToBring,
  ClassCreationFormSchedule,
  ClassCreationFormLocation,
  ClassCreationFormCost,
  ClassCreationFormTags,
  ClassCreationFormAddTxt,
  ClassCreationFormStep13*/
];

const CreateClassOnBoardingForm = () => {

      const [step, setStep] = React.useState(0);

      const onPrevClick = React.useCallback(
        (event) => {
            event.preventDefault();
            setStep(() => Math.max(step - 1, 0));
        },
        [step, setStep]
      );

      const onNextClick = React.useCallback(
        (event) => {
          event.preventDefault();
          setStep(() => Math.min(step+1, stepPages.length-1))
        },
        [step, setStep]
      );

      const onSubmitClick = React.useCallback(
        (event) => {
          event.preventDefault();
          window.open("/successfull", "_self")
        },
        [step, setStep]
      );


      return (
        <div className="form-container">
          <Row className="row-container">
            <Col xs sm="1" className="form-arrow-elt-prev">
              {
                  step !== 0 ? (
                    <i class="fas fa-arrow-left fa-2x" onClick={onPrevClick} style={{color: "#616161"}}></i>
                  ) : (
                    <i class="fas fa-user fa-2x" style={{color: "#616161"}} size={32}></i>
                  )
              }
            </Col>
            <Col>{stepPages[step]}</Col>
            <Col xs sm="1" className="form-arrow-elt-next">
              {
              step !== stepPages.length-1 ? (
                    <i class="fas fa-arrow-right fa-2x" onClick={onNextClick} style={{color: "#616161"}}></i>
                  ) : (
                    <i class="fas fa-arrow-right fa-2x" onClick={onSubmitClick} style={{color: "#616161"}}></i>
                  )
              }
            </Col>
          </Row> 
        </div> 
      )
}

export default CreateClassOnBoardingForm;

它仍然显示：

---

知道它为什么不显示任何内容吗？

尝试创建如下数组：

const stepPages = [
       <ClassCreationFormName />,
       // etc.
];

    

const stepPages=[
,
//等等。
];

const stepPages = [
       <ClassCreationFormName />,
       // etc.
];