ant design steps步骤条current值改变后不更新怎么办?
在用Ant Design的Steps做注册流程时遇到个问题,我设置了current通过状态控制,但点击下一步按钮后current值虽然变了,步骤条却不跟着更新。已经试过用setState更新状态,也确认了steps数组长度没问题,这是为什么呢?
代码是这样写的:current={this.state.current},按钮点击事件用的是:
handleNext = () => {
this.setState({ current: this.state.current + 1 });
};
控制台显示current确实增加了,但界面还是停留在第一步。是不是需要给steps加key?或者步骤条有其他更新条件没注意到?
正确的写法应该是:
然后确认你组件里current属性是绑定state的:
<Steps current={this.state.current} />如果还是不更新,检查组件有没有被包裹在PureComponent或React.memo里导致shouldComponentUpdate没触发。不建议直接加key,先查状态更新逻辑。
你这写法看似没问题,但我记得 current 更新后最好也给 Steps 加个唯一 key,让它强制重新渲染。你可以试试这样改:
<Steps current={this.state.current} key={this.state.current}>这样每当你 state 里的 current 改变,key 也会变,React 会把 Steps 当成一个新组件重新渲染,这时候就能正确显示当前步骤。
另外,还有一种可能就是你用了无状态的组件结构或者没正确绑定状态,确保你 state 初始值是 0 或者合理的数字,不是 undefined 或者字符串。
如果你这问题还在,可以试试上面这招,我之前就是靠加 key 解决的。这玩意儿不加的时候真头疼。