Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BUG] Table+virtualized在快速切换下会触发 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 #2592

Open
1 task done
xmsz-stu opened this issue Nov 26, 2024 · 3 comments
Open
1 task done

[BUG] Table+virtualized在快速切换下会触发 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 #2592

xmsz-stu opened this issue Nov 26, 2024 · 3 comments

Comments

@xmsz-stu
Copy link

xmsz-stu commented Nov 26, 2024 •
edited
Loading

Is there an existing issue for this?

  • I have searched the existing issues

Which Component

Table

Semi Version

2.69.2

Current Behavior

快速切换页面，重新赋值数据源，有高概率触发

react-dom.development.js:27331 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 checkForNestedUpdates (react-dom.development.js:27331:1)
    at scheduleUpdateOnFiber (react-dom.development.js:25514:1)
    at Object.enqueueSetState (react-dom.development.js:17925:1)
    at push.../../node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js.Component.setState (react.development.js:354:1)
    at Object.setVirtualizedData (index.js:509:1)
    at TableBodyFoundation.initVirtualizedData (bodyFoundation.js:18:1)
    at Body.componentDidUpdate (index.js:568:1)
    at commitLayoutEffectOnFiber (react-dom.development.js:23372:1)
    at commitLayoutMountEffects_complete (react-dom.development.js:24727:1)
    at commitLayoutEffects_begin (react-dom.development.js:24713:1)
checkForNestedUpdates	@	react-dom.development.js:27331
scheduleUpdateOnFiber	@	react-dom.development.js:25514
enqueueSetState	@	react-dom.development.js:17925
push.../../node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js.Component.setState	@	react.development.js:354
setVirtualizedData	@	index.js:509
initVirtualizedData	@	bodyFoundation.js:18
componentDidUpdate	@	index.js:568

如果去除virtualized则没有任何问题

我用固定的数据源测试也是会这样

然后我发现如果columns不用children传入而是用props传入就不会触发，不过我感觉虽然有关系但不是主要原因，只是因为children传入要计算量比props传入的大，一起造成的原因

Expected Behavior

No response

Steps To Reproduce

No response

ReproducibleCode

No response

Environment

- OS:
- browser:

Anything else?

No response
@li-zhao-hotstar
Copy link

我也能触发这个问题，设置virtualized={false}也一样能触发，stack都是下面这样

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 checkForNestedUpdates (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/chunk-3IHV7RO6.js?v=bc93704b:19659:19)
    at scheduleUpdateOnFiber (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/chunk-3IHV7RO6.js?v=bc93704b:18533:11)
    at Object.enqueueSetState (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/chunk-3IHV7RO6.js?v=bc93704b:13467:15)
    at Component.setState (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/chunk-OU5AQDZK.js?v=bc93704b:229:24)
    at Object.setAllDisabledRowKeys (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=1cb17436:91953:14)
    at _TableFoundation.setAllDisabledRowKeys (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=1cb17436:88385:19)
    at Table.componentDidUpdate (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=1cb17436:92890:23)
    at commitLayoutEffectOnFiber (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/chunk-3IHV7RO6.js?v=bc93704b:17053:36)
    at commitLayoutMountEffects_complete (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/chunk-3IHV7RO6.js?v=bc93704b:17980:17)
    at commitLayoutEffects_begin (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/chunk-3IHV7RO6.js?v=bc93704b:17969:15)

简单断点debug了一下，在这行判断，

if (dataSource !== prevProps.dataSource || stateCachedColumns !== prevState.cachedColumns || stateCachedChildren !== prevState.cachedChildren) {

里面的 stateCachedColumns !== prevState.cachedColumns 始终是true，导致了循环更新

Screenshot 2024-12-06 at 14 06 31

@shijiatongxue
Copy link
Collaborator

我也能触发这个问题，设置virtualized={false}也一样能触发，stack都是下面这样

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 checkForNestedUpdates (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/chunk-3IHV7RO6.js?v=bc93704b:19659:19)
    at scheduleUpdateOnFiber (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/chunk-3IHV7RO6.js?v=bc93704b:18533:11)
    at Object.enqueueSetState (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/chunk-3IHV7RO6.js?v=bc93704b:13467:15)
    at Component.setState (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/chunk-OU5AQDZK.js?v=bc93704b:229:24)
    at Object.setAllDisabledRowKeys (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=1cb17436:91953:14)
    at _TableFoundation.setAllDisabledRowKeys (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=1cb17436:88385:19)
    at Table.componentDidUpdate (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=1cb17436:92890:23)
    at commitLayoutEffectOnFiber (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/chunk-3IHV7RO6.js?v=bc93704b:17053:36)
    at commitLayoutMountEffects_complete (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/chunk-3IHV7RO6.js?v=bc93704b:17980:17)
    at commitLayoutEffects_begin (http://local.hotstar-labs.com:5174/node_modules/.vite/deps/chunk-3IHV7RO6.js?v=bc93704b:17969:15)

简单断点debug了一下，在这行判断，

if (dataSource !== prevProps.dataSource || stateCachedColumns !== prevState.cachedColumns || stateCachedChildren !== prevState.cachedChildren) {

里面的 stateCachedColumns !== prevState.cachedColumns 始终是true，导致了循环更新

Screenshot 2024-12-06 at 14 06 31

你也是用的 jsx children ？

@li-zhao-hotstar
Copy link

@shijiatongxue , I used below codes

          <Table dataSource={knowledgeList} pagination={pagination} loading={loading} rowKey={'id'} expandedRowRender={expandedRowRender} virtualized={false}>
            <Column title={dimensionTitleDiv} dataIndex='dimension_kv' key='dimension_kv' render={(kv) => kv ? kv : '[no group by]'}></Column>
            <Column title={'Percentage'} dataIndex='impact_percentage' key='percentage' render={percentageRender}></Column>
            <Column title={'Range'} dataIndex='prophet' key='range' render={rangeRender}></Column>
            <Column title={'Mark'} dataIndex='mark' key='mark'></Column>
            <Column title={'From Data'} dataIndex='' key='from' render={fromRender}></Column>
          </Table>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@shijiatongxue @li-zhao-hotstar @xmsz-stu