Reactjs 加载时进度条增加进位

我正在使用reactjs和ant design开发一个简单的进度条，它可以提高负载百分比，我的问题是我无法达到这个效果

希望你能理解我

谢谢

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
百分比：0
};
}
componentDidUpdate（）{
让百分比=此.state.percent；
对于（；百分比<40；百分比++）{
这是我的国家({
百分比：百分比
});
}
}
render（）{
返回(
);
}
}

在

componentdiddupdate

中有百分比循环。因此，在更新组件之前，它不会触发（在代码中的其他地方没有）。如果将其更改为

componentDidMount

，它将立即执行循环。查看React lifecycle方法及其触发时间。

一般来说，您不应该在

componentDidUpdate

中使用

setState（）

，因为您可能会导致无限循环。好的，先生，谢谢您的建议，这很有效。我会把动画制作得很流畅，不用担心。请把答案标记为正确，这样人们就知道问题已经解决了：）对不起，我还在等时间。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      percent: 0
    };
  }

  componentDidUpdate() {
    let percent = this.state.percent;
    for (; percent < 40; percent++) {
      this.setState({
        percent: percent
      });
    }
  }
  render() {
    return (
      <div>
        <Progress percent={this.state.percent} />
      </div>
    );
  }
}