Arco Design Steps步骤条怎么动态控制当前步骤？

设计师智玲提问于 2026-03-14 21:22:21 阅读 49

组件

我用 Arco Design 的 Steps 组件，想根据接口返回的数据动态设置当前步骤，但试了直接改 current 值没反应，是哪里不对？

我这样写的：

const [current, setCurrent] = useState(0);

useEffect(() => {
  fetchData().then(res => {
    setCurrent(res.step); // 比如 res.step 是 2
  });
}, []);

但页面上步骤条还是停在第0步，数据明明更新了，控制台打印 current 也是对的……

我来解答赞 9 收藏

反馈

2 条解答

爱学习的美美 Lv1

你的问题在于 Steps 组件的 current 属性需要配合 onChange 才能生效，这是 Arco Design 的受控模式要求。

直接改这个：

const [current, setCurrent] = useState(0);



useEffect(() => {

  fetchData().then(res => {

    setCurrent(res.step);

  });

}, []);



// 给 Steps 加上 onChange

关键点就是 onChange 这个回调必须加，它相当于告诉组件"允许外部修改 current"，否则组件内部不会响应状态变化。

如果你不需要点击切换步骤，只让程序控制，可以写成 onChange={(val) => setCurrent(val)} 或者直接 onChange={setCurrent}。

2026-03-18 20:07

百里东旭 Lv1

问题很简单，res.step 很可能是字符串 "2" 而不是数字 2，类型不对导致组件不响应。

改成这样：

setCurrent(Number(res.step));

或者在定义状态时确保是数字：

const [current, setCurrent] = useState(0);



// 强制转数字

useEffect(() => {

  fetchData().then(res => {

    setCurrent(+res.step);

  });

}, []);

另外提醒一下，Steps 的 current 是从 0 开始的，你返回 2 的话实际显示的是第 3 步（0=第1步，1=第2步，2=第3步），确认一下业务逻辑是否符合预期。

2026-03-16 17:00