Maximum update depth exceeded.

[meowtec]

In the demo below, ScrollableTabBarNode will repeatedly call componentDidUpdate and setState.

export default class App extends PureComponent {
  render() {
    return (
      <Tabs style={{ width: 450 }}>
        <Tabs.TabPane tab="四个汉字" key="1" />
        <Tabs.TabPane tab="汉字" key="2" />
        <Tabs.TabPane tab="四个汉字" key="3" />
        <Tabs.TabPane tab="四个汉字" key="4" />
      </Tabs>
    )
  }
}

.ant-tabs .ant-tabs-bar .ant-tabs-nav-container-scrolling .ant-tabs-nav-scroll .ant-tabs-nav-animated {
  padding: 0 8px;
}

.ant-tabs .ant-tabs-bar .ant-tabs-nav-scroll .ant-tabs-nav {
  padding: 0 16px;
}

bundle.js:15177 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at invariant (bundle.js:15177)
    at scheduleWork (bundle.js:32076)
    at Object.enqueueSetState (bundle.js:26745)
    at ScrollableTabBarNode../node_modules/react/cjs/react.development.js.Component.setState (bundle.js:39646)
    at ScrollableTabBarNode.setNext (bundle.js:13859)
    at ScrollableTabBarNode.setNextPrev (bundle.js:13764)
    at ScrollableTabBarNode.componentDidUpdate (bundle.js:13708)

[yasinosman]

Still facing the same bug in 2022. I also use the Tabs and overriding base styles.