fix(qrcode): 修复切换 tab 后二维码图片失效问题
- 移除 ImageUploader 组件卸载时的预览 URL 释放逻辑 - 在 useQrCode hook 中统一管理预览 URL 生命周期 - 创建新预览 URL 前释放旧的,避免内存泄漏
This commit is contained in:
@@ -36,15 +36,6 @@ const ImageUploader = ({
|
|||||||
const { showMessage } = useSnackbar();
|
const { showMessage } = useSnackbar();
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
// 清理预览 URL,防止内存泄漏
|
|
||||||
useEffect(() => {
|
|
||||||
return () => {
|
|
||||||
if (previewUrl) {
|
|
||||||
URL.revokeObjectURL(previewUrl);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [previewUrl]);
|
|
||||||
|
|
||||||
const handleFileChange = useCallback(
|
const handleFileChange = useCallback(
|
||||||
(file: File) => {
|
(file: File) => {
|
||||||
onFileChange(file);
|
onFileChange(file);
|
||||||
|
|||||||
@@ -162,13 +162,19 @@ export function useQrCode(): QrCodeContextValue {
|
|||||||
// 处理文件选择
|
// 处理文件选择
|
||||||
const handleFileChange = useCallback(
|
const handleFileChange = useCallback(
|
||||||
(file: File) => {
|
(file: File) => {
|
||||||
setParserState((prev) => ({
|
setParserState((prev) => {
|
||||||
...prev,
|
// 释放旧的预览 URL
|
||||||
selectedFile: file,
|
if (prev.previewUrl) {
|
||||||
previewUrl: URL.createObjectURL(file),
|
URL.revokeObjectURL(prev.previewUrl);
|
||||||
decodedResult: '',
|
}
|
||||||
parseError: '',
|
return {
|
||||||
}));
|
...prev,
|
||||||
|
selectedFile: file,
|
||||||
|
previewUrl: URL.createObjectURL(file),
|
||||||
|
decodedResult: '',
|
||||||
|
parseError: '',
|
||||||
|
};
|
||||||
|
});
|
||||||
// 自动解析
|
// 自动解析
|
||||||
parseQrCode(file);
|
parseQrCode(file);
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user