步骤进度条加载状态怎么同步到每个步骤？

A. 春豪提问于 2026-03-05 07:10:19 阅读 26

交互

我在做一个多步骤表单，想在每个步骤切换时显示加载状态，但进度条的 activeIndex 和 loading 状态总是对不上。比如点“下一步”后 loading 是 true，但进度条却还没更新到下一个步骤，体验很奇怪。

我试过把 setActiveIndex 放在 setLoading(true) 前面，也试过用 useEffect 监听 loading 变化再更新索引，但要么闪一下错位，要么根本没反应。下面是我的简化代码：

const [activeIndex, setActiveIndex] = useState(0);
const [loading, setLoading] = useState(false);

const handleNext = async () => {
  setLoading(true);
  await submitStep(activeIndex); // 模拟 API 调用
  setActiveIndex(prev => prev + 1);
  setLoading(false);
};

步骤进度

我来解答赞 8 收藏

反馈

1 条解答

西门东硕 Lv1

这个问题其实是因为 React 的状态更新批处理和异步特性导致的。setLoading(true) 和 setActiveIndex 虽然看起来是顺序执行的，但 React 可能会把它们合并成一次更新。

建议改成这样，把状态更新放在一起，并且在 API 调用前就更新 activeIndex：

const handleNext = async () => {

  const nextIndex = activeIndex + 1;

  setActiveIndex(nextIndex);

  setLoading(true);

  

  try {

    await submitStep(nextIndex);

  } finally {

    setLoading(false);

  }

};

关键点：
1. 先计算 nextIndex，这样进度条会立即更新
2. 把两个 setState 放在一起，减少渲染次数
3. 用 try/finally 确保 loading 状态一定会被重置

这样处理之后进度条会先跳到下一步，然后显示 loading，体验就顺了。我经常遇到这种 UI 状态同步的问题，每次都要跟 React 的更新机制斗智斗勇...

2026-03-05 09:00