React17+Typescript4.1项目多步骤表单显示异常及getState报错如何解决？

问题根因 #

1. 当前Steps组件直接放在Routes节点外，属于全局渲染内容，所以所有路由页面底部都会显示这个多步骤表单，这就是表单出现在首页的原因。
2. 你单独给SpecialAbilities配置了路由，这个组件作为多步骤表单的子步骤，仅在被react-step-builder的Step组件包裹时才会被注入getState、handleChange等工具方法，单独路由渲染时没有这些props，自然会抛出类型错误。

解决方案 #

第一步：清理App.tsx冗余配置

删除App.tsx里<Routes>标签外的整个<Steps>块，同时删除Routes里路径为SpecialAbilities的单步路由。

第二步：把多步骤表单封装到Skills页面

在空白Skills页面中引入Steps、Step和三个表单子组件，示例代码如下：

/** @jsxImportSource @emotion/react */
import React from 'react';
import { Steps, Step } from 'react-step-builder';
import SpecialAbilities from './SpecialAbilities';
import AttrPage from './AttrPage';
import CoolPage from './CoolPage';

function SkillsPage() {
  return (
    <div>
      {/* 可自定义添加Skills页面公共内容，比如标题、说明文案 */}
      <Steps>
        <Step component={SpecialAbilities} />
        <Step component={AttrPage} />
        <Step component={CoolPage} />
      </Steps>
    </div>
  );
}

export default SkillsPage;

第三步：配置Skills页面路由

在App.tsx的路由配置中新增Skills页面路由，设置为Stats页面的子路径即可：

/** @jsxImportSource @emotion/react */
import React from 'react';
import { css } from '@emotion/react';
import { Header } from './header';
import { HomePage } from './Views/Home/HomePage';
import { fontFamily, fontSize, gray2 } from './Styles';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import PlayerPage from './Views/PlayerPage';
import PlayersPage from './Views/PlayersPage';
import PlayerCreatePage from './Views/Create/PlayerCreatePage';
import NotFoundPage from './Views/NotFoundPage';
import StatsPage from './Views/Stats/Stats';
import SkillsPage from './Views/Skills/SkillsPage'; // 引入Skills页面

function App() {
  return (
    <BrowserRouter>
      <div
        css={css`
          font-family: ${fontFamily};
          font-size: ${fontSize};
          color: ${gray2};
        `}
      >
        <Header />
        <Routes>
          <Route path="" element={<HomePage />} />
          <Route path="Players" element={<PlayersPage />} />
          <Route path="Player/:id" element={<PlayerPage />} />
          <Route path="Create" element={<PlayerCreatePage />} />
          <Route path="Stats" element={<StatsPage />} />
          <Route path="Stats/skills" element={<SkillsPage />} /> {/* 新增表单页路由 */}
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

第四步：添加跳转入口

在StatsPage组件中添加跳转按钮/链接，指向/stats/skills即可，示例代码：

// react-router-dom v6 跳转示例
import { useNavigate } from 'react-router-dom';

function StatsPage() {
  const navigate = useNavigate();
  return (
    <div>
      {/* 原有Stats页面内容 */}
      <button onClick={() => navigate('/stats/skills')}>进入技能配置表单</button>
    </div>
  )
}

调整后多步骤表单只会在访问/stats/skills路径时渲染，不会再出现在首页，也不会再出现props.getState is not a function的报错，三个表单子组件被Step组件包裹后可以正常拿到注入的props。

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