FileUpload Templated: Inconsistency in getFiles() and totalSize calculation during onSelect and onRemove events
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 45/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- next.js, react
- 领域
- frontend
调研方向
从 FileUpload 组件的 onSelect 和 onRemove 事件流，以及使用 headerTemplate 或 itemTemplate 时 getFiles() 的行为入手。使用 React 18.3.1 和 PrimeReact 10.9.7 重现该问题，然后验证 getFiles() 是否同步反映更新后的文件列表，并确认 totalSize 的计算不再需要 setTimeout。
由索引模型根据 Issue 内容生成。
描述
Describe the bug
When utilizing the FileUpload component with custom templates (headerTemplate, itemTemplate), managing the total file size state (totalSize) externally becomes inconsistent. The onSelect and onRemove events appear to fire asynchronously relative to the component's internal file list update.
Reproducer
No response
System Information
"react": "18.3.1",
"react-dom": "18.3.1",
"primereact": "^10.9.7",
Steps to reproduce the behavior
Steps to Reproduce:
Create a FileUpload component using the App Router in Next.js (client-side) with headerTemplate to display an external totalSize state managed by useState.
Implement onSelect and onRemove handlers that attempt to use fileUploadRef.current.getFiles() to accurately calculate the current total size.
Select a single file (File A). The displayed total size is incorrect (often 0 or delayed).
Select a second file (File B). The total size calculation often incorrectly duplicates the size of File A plus the size of File B (e.g., A + A + B), or only shows the size of File A.
Deleting File B sometimes synchronizes the size correctly, sometimes no
Expected behavior
fileUploadRef.current.getFiles() should reliably and synchronously reflect the updated list of files immediately after the onSelect or onRemove events have fired, allowing external state management to remain synchronized without requiring workarounds.
Current Workaround:
The only reliable way to achieve synchronization is by using setTimeout(syncTotalSize, 0) within the onSelect and onRemove handlers to defer the state update to the next event loop tick.
- 主要语言
- CSS
- 星标
- 8.3k
- 派生
- 1.2k
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
primefaces/primereact 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 72/100
primefaces/primereact#8552 ·
-
难度 1/5 1-3 小时 新手友好度 88/100
primefaces/primereact#8550 ·
-
Row checkbox selection tick is invisible in Landing Page Theme section可能已有人在做 @Prakash1185 于 151 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 68/100
primefaces/primereact#8545 ·
-
Dependency conflict between jspdf v4 and jspdf-autotable during npm install可能已有人在做 @Kamran92 于 166 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 72/100
primefaces/primereact#8537 ·
-
难度 3/5 1-2 天 新手友好度 58/100
primefaces/primereact#8551 ·
查看 primefaces/primereact 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 72/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 76/100
Northeastern-Electric-Racing/FinishLine#4660 ·
维护者通常 2 天内回复
-
Earn report crashes with "RangeError: Invalid time value" when a report row has an unparsable timestamp可能已有人在做 @Gurkaran18 今天认领。 未关闭bug
难度 2/5 1-3 小时 新手友好度 75/100
joinmarket-webui/jam#1588 ·
维护者通常 3 天内回复
-
难度 2/5 1-3 小时 新手友好度 65/100
akitaonrails/FrankMD#268 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 83/100
marmelab/atomic-crm#401 ·
维护者通常 1 天内回复