React Hook组件传递next函数报错：初始化前无法访问'next'

return (<ConfirmForm />)

错误原因 #

你遇到的报错是因为调用useMultistepForm时传入的steps数组，提前引用了还未被Hook初始化的next函数。在执行useMultistepForm([<ConfirmForm next={next} />])的瞬间，Hook内部的next函数还没完成定义，此时访问next属于变量未初始化就使用，因此触发了ReferenceError。

解决方案 #

方案一：修改Hook，自动向步骤组件注入导航方法

这是更合理的设计，让Hook自动把next/back等导航方法作为props传给每个步骤组件，无需手动传递：

修改useMultistepForm的实现：

import { useState, ReactElement, cloneElement } from 'react';

export const useMultistepForm = (steps: ReactElement[]) => {
  const [currentStepIndex, setCurrentStepIndex] = useState(0);

  const next = () => {
    setCurrentStepIndex(i => {
      if (i >= steps.length - 1) return i;
      return i + 1;
    });
  };

  const back = () => {
    setCurrentStepIndex(i => {
      if (i <= 0) return i;
      return i - 1;
    });
  };

  const goTo = (index: number) => {
    setCurrentStepIndex(Math.max(0, Math.min(index, steps.length - 1)));
  };

  // 给当前步骤组件自动注入导航方法
  const currentStep = cloneElement(steps[currentStepIndex], {
    next,
    back,
    goTo,
    isFirstStep: currentStepIndex === 0,
    isLastStep: currentStepIndex === steps.length - 1
  });

  return {
    step: currentStep,
    back,
    goTo,
    isFirstStep: currentStepIndex === 0,
    lastStepIndex: steps.length - 1,
    currentStepIndex
  };
};

使用时直接传入组件即可，无需手动传next：

import useMultistepForm from 'Hooks/useMultipleStep';

const { step } = useMultistepForm([
  <ConfirmForm />, // 组件内部可直接通过props.next访问
  <ConfirmCard />
]);

// 渲染当前步骤
return <div>{step}</div>;

ConfirmForm组件内部示例：

const ConfirmForm = ({ next }) => {
  return (
    <div>
      {/* 表单内容 */}
      <button onClick={next}>下一步</button>
    </div>
  );
};

方案二：延迟创建steps数组（需配合Hook修改）

如果不想大幅改动Hook，可以用useMemo延迟生成steps数组，确保next已初始化：

import { useMemo } from 'react';
import useMultistepForm from 'Hooks/useMultipleStep';

// 先调用Hook并解构出next
const {
  step,
  back,
  goTo,
  isFirstStep,
  lastStepIndex,
  next
} = useMultistepForm([]);

// 用useMemo延迟创建steps数组，依赖next
const steps = useMemo(() => [
  <ConfirmForm next={next} />,
  <ConfirmCard />
], [next]);

// 注意：需在Hook中添加监听steps变化的逻辑，否则初始空数组不会更新
// 在useMultistepForm中加入：
// useEffect(() => {
//   if (steps.length > 0 && currentStepIndex >= steps.length) {
//     setCurrentStepIndex(steps.length - 1);
//   }
// }, [steps]);

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