Avatar 从不撤销其 blob URL,而过时的响应可能会显示错误的用户头像
作者: omlahore创建于 2026年8月15日更新于 2026年9月6日
□ 总结
`前端/src/ ui/Avatar/index.jsx'从未撤销它创建的blob URL,因为清除功能是写作的,但从未返回. 单独地,同一种效果对于僵硬的反应没有防守,所以虚拟化用户列表中的一行可以最终显示不同的用户图片.
□ 密码
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你来干什么? react.useeffect (( ()) {{{{} aync 函数获取Avatar () { const blob = 等待用户Service.getAvatar(avatarId); setAvatar( URL. 创建对象URL( blob) ) ; {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢? 如果 (avatarId) 获取 Avatar ();
(a) URL.revoke ObjectURL(avatar); // eslint- disable- next- line 反应- hooks/ 详尽- deps {\fn华文楷体\fs16\1cHE0E0E0} 页:1
第18行缺少 " 返回 " 。 如所写的那样,它构建出箭头函数并丢弃了它,因此“URL.revoke ObjectURL”从未到达。 意图是明确的,它只是没有线。 在前端创建blob URL的所有其他地方确实都正确撤销了它,`Camera.jsx'、`PDF.jsx'、`Chat/index.js'、` lib/generate-file.js'和`BulkUpload Drawer',这是使这个地方突出的原因。
在`eslint.config.mjs'中,“不使用-表达”是不能使用的,因此没有任何标记。
□ 影响
`Avatar'在`Userstable.jsx'和`Virtualized UserList.jsx'中按行表示。 由于列表是虚拟化的,"avatarId"在滚动时会像行一样在相同的挂载组件上进行再生,所以这不是一次性分配. 每次更改都会获取一个新的blob并泄露上一页寿命的 URL 。
同样的再利用造成了第二个问题。 不存在被忽略的旗帜,因此,如果在部件移入新部件后,要求解决先前的`avatarId'问题,则后期反应称为`setAvatar'并覆盖正确的画面。 在成员列表中,指一行显示错误的人的外形,这比空白的更令人困惑.
□ 预期与实际
期望: 当变相器改变或组件卸载时, 自动显示器的对象 URL 会被发布, 而“ avatarId” 移动后到达的响应被丢弃 。
实际:从未发布过URL,迟回会获胜.
□ 注释
我有一个固定的测试, 三个案件 包括吊销在挂载, 吊销在零零变化 和忽略 stilled response。 三者都以 " main " 为敌,并随修改而通过。 我很乐意打开公关 或离开公关 如果你愿意把这个指定给别的地方 说吧
有一件事我在写测试时遇到,这与这个问题无关,我不打算在这里解决:前端的拼接套件`测试环境':`最佳环境-jsdom'`但`最佳环境-jsdom'不在`前端/包装.json'。 由于Jest 28没有捆绑,因此在新的克隆 " npx joest " 上,在运行任何设备之前都找不到 " 试运行环境 -- -- 环境 -- -- jsdom " 。 " src/ helpers/ tests /validateName.test.js " 等现有测试击中了同一道墙. 没有CI工作流程运行前端的笑话,所以没有什么是红色的,但它确实意味着套房无法运行
. . . . . . .内容来源: ToolJet/ToolJet