使用TypeScript集成react-final-form向导表单时表单无法正常显示

核心错误定位 #

• 渲染失效的直接原因：Form组件的render prop回调没有返回值
  当前代码中Form的渲染回调写法存在逻辑问题：箭头函数使用大括号包裹函数体，函数内部仅写了孤立的form JSX表达式，没有通过return语句返回内容，实际回调返回值为undefined，导致Form组件无内容可渲染。JavaScript版本能正常运行，是因为通常实现时会用小括号包裹JSX，利用箭头函数的隐式返回特性，不会出现这个问题。
• 分页逻辑的潜在bug：页码计算越界
  原next方法中页码上限取子元素总数，由于子元素的索引从0开始计数，最大有效索引为「子元素总数-1」，按原逻辑计算会把页码推到索引外，导致取到空的页面内容，出现点下一页后白屏的问题。
• 类型定义兼容问题：
  一方面原表单值类型使用String、Number这类TS包装对象类型，和react-final-form实际传递的原始值类型不匹配，容易触发隐式类型报错；另一方面原组件的props类型定义没有显式声明children字段，在新版本React类型定义下会触发children属性不存在的类型警告。

修复后的核心代码 #

import React, { useState } from "react";
import { Form } from "react-final-form";

// 修正为原始值类型
type Values = {
  name: string;
  surname: string;
  email: string;
  password: string;
  city: string;
  birthDay: number;
  birthMonth: number;
  birthYear: number;
};

// 补全props类型定义，显式声明children字段
type WizardProps = {
  onSubmit: (values: Values) => void;
  children: React.ReactNode;
};

const Wizard: React.FC<WizardProps> = ({ onSubmit, children }) => {
  const [page, setPage] = useState(0);
  const [values, setValues] = useState<Values | undefined>(undefined);
  const childList = React.Children.toArray(children);
  const activePage = childList[page];
  const isLastPage = page === childList.length - 1;

  // 修正页码计算逻辑，上限取最大有效索引
  const next = (values: Values) => {
    setPage(Math.min(page + 1, childList.length - 1));
    setValues(values);
  };

  const previous = () => {
    setPage(Math.max(page - 1, 0));
  };

  const handleSubmit = (values: Values) => {
    if (isLastPage) {
      return onSubmit(values);
    } else {
      next(values);
    }
  };

  return (
    <Form onSubmit={handleSubmit}>
      {/* 调整回调写法，确保渲染逻辑有明确的返回值 */}
      {({ handleSubmit, submitting }) => (
        <form onSubmit={handleSubmit}>
          {activePage}
          <div className="buttons">
            {page > 0 && (
              <button type="button" onClick={previous}>
                « Powrót
              </button>
            )}
            {!isLastPage && <button type="submit">Dalej »</button>}
            {isLastPage && (
              <button type="submit" disabled={submitting}>
                Zakończ
              </button>
            )}
          </div>
        </form>
      )}
    </Form>
  );
};

export default Wizard;

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