React文件上传预览切换标签后消失（状态留存）问题求助

你的问题核心是：切换标签导致组件卸载/重渲染时，虽然状态里还保留着预览URL，但预览无法正常显示。本质是预览生成逻辑的引用不稳定，或者文件对象的引用在组件卸载后丢失，导致URL.createObjectURL生成的链接失效。结合useCallback的解决方案如下：

1. 缓存文件处理函数，稳定预览生成逻辑 #

用useCallback缓存上传后的预览生成函数，确保组件重渲染时函数引用不变；同时用useRef保存原始文件对象，避免组件卸载后文件被垃圾回收导致URL失效。

import { useState, useCallback, useRef, useEffect } from 'react';
import AdminFileUpload from './AdminFileUpload';

const FileUploadSection = () => {
  const [previewUrls, setPreviewUrls] = useState({
    image: '',
    video: '',
    subtitle: ''
  });
  // 用ref存原始文件，防止组件卸载后文件被回收
  const uploadedFiles = useRef({
    image: null,
    video: null,
    subtitle: null
  });

  // 用useCallback缓存处理函数，仅依赖setPreviewUrls
  const handleFileSelect = useCallback((fileType, file) => {
    if (!file) return;
    
    uploadedFiles.current[fileType] = file;
    const previewUrl = URL.createObjectURL(file);
    setPreviewUrls(prev => ({ ...prev, [fileType]: previewUrl }));
  }, [setPreviewUrls]);

  // 组件卸载时释放ObjectURL，避免内存泄漏
  useEffect(() => {
    return () => {
      Object.values(previewUrls).forEach(url => url && URL.revokeObjectURL(url));
    };
  }, [previewUrls]);

  return (
    <div>
      <AdminFileUpload
        type="image"
        onFileSelect={(file) => handleFileSelect('image', file)}
        previewUrl={previewUrls.image}
      />
      <AdminFileUpload
        type="video"
        onFileSelect={(file) => handleFileSelect('video', file)}
        previewUrl={previewUrls.video}
      />
      <AdminFileUpload
        type="subtitle"
        onFileSelect={(file) => handleFileSelect('subtitle', file)}
        previewUrl={previewUrls.subtitle}
      />
    </div>
  );
};

export default FileUploadSection;

2. 优化子组件AdminFileUpload的预览渲染 #

确保子组件接收previewUrl后，能稳定渲染预览，同样用useCallback缓存预览渲染逻辑，避免不必要的重渲染：

import { useCallback } from 'react';

const AdminFileUpload = ({ type, onFileSelect, previewUrl }) => {
  // 缓存预览渲染函数，仅依赖previewUrl和type
  const renderPreview = useCallback(() => {
    if (!previewUrl) return null;

    switch (type) {
      case 'image':
        return <img src={previewUrl} alt="图片预览" className="preview-img" />;
      case 'video':
        return <video src={previewUrl} controls className="preview-video" />;
      case 'subtitle':
        return <p className="subtitle-preview">已上传字幕：{previewUrl.split('/').pop()}</p>;
      default:
        return null;
    }
  }, [previewUrl, type]);

  return (
    <div className="file-upload-wrapper">
      <input
        type="file"
        accept={type === 'image' ? 'image/*' : type === 'video' ? 'video/*' : '.srt,.vtt'}
        onChange={(e) => onFileSelect(e.target.files[0])}
      />
      <div className="preview-container">{renderPreview()}</div>
    </div>
  );
};

export default AdminFileUpload;

关键注意点 #

• useCallback的作用是固定函数引用，避免父组件重渲染时子组件因为函数变化而重新渲染，同时保证预览生成逻辑的稳定性。
• 用useRef存原始文件是因为URL.createObjectURL生成的链接依赖文件对象在内存中的存在，如果文件被回收，链接会直接失效。
• 组件卸载时一定要调用URL.revokeObjectURL释放资源，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Punit Soni