Maximum update depth exceeded: rowVirtualizer.measureElement
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 35/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend, performance
調査の方向性
まず、リンクされた再現リポジトリを実行し、その table-dynamic-column-width ページと table-fixed-column-width ページを比較します。examples/react/virtualized-rows/src/main.tsx にある参照対象の React 仮想化例を読み、measureElement の動作を追跡します。ページ全体で列のサイズが動的に変わり、要求された幅の制約をサポートしながら、maximum update depth エラーなしで仮想化が動作すれば完了です。
索引モデルが issue の本文から書いたものです。
説明
Describe the bug
Hello!
I am trying to add list virtualization to a tanstack table.
I followed the implementation example from https://github.com/TanStack/table/blob/main/examples/react/virtualized-rows/src/main.tsx. List virtualization is working great, but now it seems like I am forced to use a fixed width column. Before this, each column took a dynamic (different) width based on its content without having text wrapping to a new line and the table was spanning across the full width of the page.
I tried removing the fixed width from columns but then I have "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." error:
Your minimal, reproducible example
https://github.com/dragos-cojocaru/tanstack-virtual-table-dynamic-width
Steps to reproduce
I created a repository where you can check the error: https://github.com/dragos-cojocaru/tanstack-virtual-table-dynamic-width:
- table-dynamic-column-width page is where I have the error because I removed the fixed width of columns
- table-fixed-column-width page is where the virtualization is working but I have fixed width for each table column.
Expected behavior
I want to have a tanstack table with virtualization that span across the whole page width and each column width should be dynamically to accommodate its content. Preferably I should be able to specify a max-width for all columns or for each column separately.
How often does this bug happen?
None
Screenshots or Videos
No response
Platform
- Windows 11 Pro
- Chrome 141.0.7390.108 (Official Build) (64-bit)
tanstack-virtual version
3.13.12
TypeScript version
No response
Additional context
No response
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
- 主要言語
- TypeScript
- スター
- 7.1k
- フォーク
- 472
- 平均マージ
- 1日 1時間
- マージ済み PR(30日)
- 11
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
TanStack/virtual のほかの issue
-
measureElement caches 0 size for nodes that aren't attached yet (Vue: rows stack at start 0 and the list scrolls away on mount)対応中かも @webn00b が 12 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
anchorTo: 'end' loses the end when the scroll element shrinks対応中かも @langleyd が 1 日前に担当しました。 オープン
難易度 3/5 1〜2日 初心者へのやさしさ 68/100
メンテナーはふだん 1 日以内に返信
-
`scrollToIndex(last, { align: 'end' })` stays short of the end after a measured row grows (virtual-core ≥ 3.17.0)対応中かも @minwookshin が 9 日前に担当しました。 オープン
難易度 4/5 3〜5日 初心者へのやさしさ 55/100
TanStack/virtual#1290 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
virtual-core: desktop Safari drops the prepend anchor write when history lands during the top rubber-band bounce対応中かも このイシューにリンクされたプルリクエストがオープン中、またはマージ済みです。 オープン
難易度 5/5 1週間以上 初心者へのやさしさ 38/100
メンテナーはふだん 1 日以内に返信
-
難易度 4/5 3〜5日 初心者へのやさしさ 62/100
メンテナーはふだん 1 日以内に返信
TanStack/virtual の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1〜3時間 初心者へのやさしさ 84/100
answerLoops/answerLoops#345 ·
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1時間未満 初心者へのやさしさ 82/100
siyuan-note/siyuan#20313 ·
メンテナーはふだん 1 日以内に返信
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
LanternOps/breeze#8254 ·
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1〜3時間 初心者へのやさしさ 82/100
gofish-graphics/gofish-graphics#1084 ·
メンテナーはふだん 1 日以内に返信