Next.js多步骤表单如何根据router.asPath变化实时更新steps状态

DevOps 小满

2026-10-4

问题根源

直接把状态更新逻辑写在组件根作用域时，每次组件渲染都会触发判断，条件满足就调用setStepsData，而状态更新又会触发组件重渲染，形成无限循环，因此触发重渲染超限错误。
用空依赖数组的useEffect时，逻辑只会在组件首次挂载完成后执行一次，后续路由变化不会触发回调，因此只有手动刷新时状态才会更新。

解决方法

将路由相关参数加入useEffect的依赖数组，同时增加路由就绪判断、避免不必要的状态更新即可：

import { useEffect } from 'react';
import { useRouter } from 'next/router';

// 你的Context组件内部逻辑
const router = useRouter();

useEffect(() => {
  // 等待Next.js路由初始化完成，避免初始加载时query参数为空导致判断错误
  if (!router.isReady) return;

  // 从路由查询参数中提取step值，默认第一步为0
  const currentStep = Number(router.query.step) || 0;

  // 按当前步骤生成对应的stepper状态，后续新增步骤只需调整数组即可
  const expectedSteps = [
    { name: 'Vertrag', status: currentStep >= 0 ? 'current' : 'upcoming' },
    { name: 'Dateneingabe', status: currentStep >= 1 ? 'current' : 'upcoming' },
    { name: 'Bestätigung', status: currentStep >= 2 ? 'current' : 'upcoming' },
  ];

  // 仅在状态不一致时更新，避免不必要的重渲染
  setStepsData(prevSteps => {
    if (JSON.stringify(prevSteps) === JSON.stringify(expectedSteps)) {
      return prevSteps;
    }
    return expectedSteps;
  });
// 依赖项加入路由就绪状态和step参数，路由变化时自动触发逻辑
}, [router.isReady, router.query.step]);