custom Data within expanding example Crashing browser
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 48/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 冷清
- 技术栈
- react, typescript
- 领域
- frontend
调研方向
运行链接的 CodeSandbox，并比较可正常工作的 useState 版本与将自定义数据直接传递给 useReactTable 的版本。先从数据结构、getSubRows 和 expanding 示例配置开始。完成标准是：自定义嵌套数据不再导致浏览器崩溃，并且 expanding 表格的行为仍然可用。
由索引模型根据 Issue 内容生成。
描述
Describe the bug
Hi,
I've taken this example: https://tanstack.com/table/v8/docs/examples/react/expanding
Removed things like the search filter and some extra debug but beside that I didn't change how expanding works.
For testing purposes I went and made my own data. A simple json and to be as close to the example as possible I print out data and put that in its own object and removed the useState data and I'm just passing the object with its subRows directly to useReactTable. When doing that the browser will crash. I'm brand new to TanStack and may not be understanding how subRows works but I feel like this shouldn't be crashing when I pass it the object when all it takes is any[](Ideally this should thrown an error but not sure where it's getting stuck in almost a loop, this is an assumption).
This however, does not crash if I pass the object to the useState(initialize).
Here is the sandbox
To be more specific, in the sandbox I have where it works and where it doesn't. To highlight where it doesn't:
const data = [
{
"firstName": "Daryl",
"lastName": "Rutherford",
"age": 15,
"visits": 945,
"progress": 46,
"status": "single",
"subRows": [
{
"firstName": "Kobe",
"lastName": "Lakin",
"age": 20,
"visits": 308,
"progress": 19,
"status": "single",
"subRows": [
{
"firstName": "Edyth",
"lastName": "Klocko",
"age": 38,
"visits": 362,
"progress": 29,
"status": "single"
},
{
"firstName": "Alayna",
"lastName": "Stroman",
"age": 11,
"visits": 120,
"progress": 25,
"status": "single"
},
{
"firstName": "Carolyn",
"lastName": "Rowe-Hammes",
"age": 14,
"visits": 14,
"progress": 77,
"status": "relationship"
}
]
},
{
"firstName": "Cassandre",
"lastName": "Hudson",
"age": 27,
"visits": 488,
"progress": 65,
"status": "relationship",
"subRows": [
{
"firstName": "Cade",
"lastName": "Hartmann-Effertz",
"age": 22,
"visits": 901,
"progress": 93,
"status": "single"
},
{
"firstName": "Pietro",
"lastName": "Yost",
"age": 7,
"visits": 731,
"progress": 99,
"status": "complicated"
},
{
"firstName": "Payton",
"lastName": "Kessler",
"age": 26,
"visits": 851,
"progress": 83,
"status": "complicated"
}
]
},
{
"firstName": "Nels",
"lastName": "Kunde",
"age": 6,
"visits": 307,
"progress": 52,
"status": "complicated",
"subRows": [
{
"firstName": "Nikki",
"lastName": "Hackett",
"age": 9,
"visits": 518,
"progress": 44,
"status": "single"
},
{
"firstName": "Cornell",
"lastName": "Gulgowski",
"age": 27,
"visits": 810,
"progress": 60,
"status": "complicated"
},
{
"firstName": "Jordan",
"lastName": "Bode",
"age": 26,
"visits": 15,
"progress": 93,
"status": "relationship"
}
]
},
{
"firstName": "Alberta",
"lastName": "Heaney",
"age": 20,
"visits": 15,
"progress": 57,
"status": "complicated",
"subRows": [
{
"firstName": "Braxton",
"lastName": "Kuvalis",
"age": 11,
"visits": 366,
"progress": 93,
"status": "relationship"
},
{
"firstName": "Elyssa",
"lastName": "Rolfson",
"age": 30,
"visits": 144,
"progress": 39,
"status": "relationship"
},
{
"firstName": "Jennyfer",
"lastName": "Altenwerth",
"age": 28,
"visits": 200,
"progress": 30,
"status": "single"
}
]
},
{
"firstName": "Bertrand",
"lastName": "Shields",
"age": 40,
"visits": 733,
"progress": 20,
"status": "complicated",
"subRows": [
{
"firstName": "Liliane",
"lastName": "Hudson",
"age": 38,
"visits": 649,
"progress": 85,
"status": "single"
},
{
"firstName": "Jevon",
"lastName": "Lemke",
"age": 32,
"visits": 5,
"progress": 89,
"status": "relationship"
},
{
"firstName": "Donavon",
"lastName": "Zemlak",
"age": 11,
"visits": 20,
"progress": 62,
"status": "complicated"
}
]
}
]
}
]
const table = useReactTable({
data,
columns,
state: {
expanded,
},
onExpandedChange: setExpanded,
getSubRows: row => row.subRows,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getExpandedRowModel: getExpandedRowModel(),
debugTable: true,
})
// etc .....
Your minimal, reproducible example
Steps to reproduce
- Uncomment Line 302 - 483 and comment out 117-299
Expected behavior
I expect it to work because I'm still passing an array. But if this isn't correct then I'd expect an error.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Linux & codesandbox
react-table version
8.10.7
TypeScript version
4.8.4
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
- 星标
- 28.5k
- 派生
- 3.6k
- 平均合并
- 1 天 14 小时
- 30 天内合并 PR
- 4
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
TanStack/table 的其他 Issue
-
难度 1/5 1 小时以内 新手友好度 78/100
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 38/100
维护者通常 1 天内回复
-
难度 5/5 一周以上 新手友好度 35/100
维护者通常 1 天内回复
-
难度 3/5 1-2 天 新手友好度 78/100
维护者通常 1 天内回复
-
难度 5/5 一周以上 新手友好度 35/100
维护者通常 1 天内回复
相似的 Issue
-
resources
难度 2/5 1-3 小时 新手友好度 72/100
railmapgen/rmg-palette#2445 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 88/100
danielmiessler/LifeOS#2242 ·
维护者通常 5 天内回复
-
good first issue hacktoberfest help wanted translation
难度 2/5 1-3 小时 新手友好度 84/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
callstackincubator/appduct#129 ·
维护者通常 1 天内回复
-
难度 1/5 1-3 小时 新手友好度 88/100