React多文件上传进度条：状态更新致createPortal闪烁问题求助

问题根源拆解 #

1. 第一批进度条消失：之前用数组存文件状态，新增第二批时直接替换了数组，导致第一批状态被覆盖，进度条无数据渲染。
2. 重复上传：上传逻辑未绑定单个文件的唯一标识，状态更新时重新触发了已上传文件的请求；或文件对象引用重复，导致重复提交。
3. Portal闪烁：每次从状态删除文件，整个文件列表组件重新渲染，Portal内DOM节点被销毁重建，引发闪烁。

具体解决步骤 #

1. 重构状态存储方式，用键值对替代数组 #

给每个上传文件生成唯一ID，用对象（或Map）存储文件状态，更新单个文件时不会影响其他文件的状态，减少不必要渲染。

// 生成唯一文件ID的工具函数
const generateFileId = () => `file_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;

// 状态定义：键是文件ID，值是文件的进度、状态等信息
const [uploadFiles, setUploadFiles] = useState({});

2. 优化上传逻辑，绑定单个文件ID #

用useCallback包裹上传函数，确保每个文件只发起一次请求，避免状态更新时重复触发。新增文件时先加入状态再发起上传，而非反向操作。

const uploadFile = useCallback(async (fileId, file) => {
  // 标记为上传中
  setUploadFiles(prev => ({
    ...prev,
    [fileId]: {...prev[fileId], status: 'uploading'}
  }));

  try {
    const formData = new FormData();
    formData.append('file', file);

    await axios.post('/api/upload', formData, {
      onUploadProgress: (e) => {
        const percent = Math.round((e.loaded * 100) / e.total);
        // 只更新当前文件的进度，不影响其他文件
        setUploadFiles(prev => ({
          ...prev,
          [fileId]: {...prev[fileId], progress: percent}
        }));
      }
    });

    // 上传完成标记为「已完成」，暂不从状态删除
    setUploadFiles(prev => ({
      ...prev,
      [fileId]: {...prev[fileId], status: 'done'}
    }));

    // 可选：延迟2秒后自动移除已完成的文件，减少频繁状态更新
    setTimeout(() => {
      setUploadFiles(prev => {
        const newState = {...prev};
        delete newState[fileId];
        return newState;
      });
    }, 2000);
  } catch (err) {
    setUploadFiles(prev => ({
      ...prev,
      [fileId]: {...prev[fileId], status: 'error'}
    }));
  }
}, [axios]);

// 处理文件选择：批量新增文件到状态，并触发上传
const handleFileSelect = (e) => {
  const newFiles = Array.from(e.target.files).map(file => ({
    id: generateFileId(),
    file,
    progress: 0,
    status: 'pending'
  }));

  setUploadFiles(prev => {
    const newState = {...prev};
    newFiles.forEach(f => {
      newState[f.id] = f;
      uploadFile(f.id, f.file);
    });
    return newState;
  });
};

3. 稳定Portal与进度条组件，减少不必要渲染 #

• 用React.memo包裹单个进度条组件，只有当该文件的进度、状态变化时才重新渲染。
• Portal的根容器用useRef固定，避免每次渲染重新创建DOM节点。

// 单个文件进度条组件，用React.memo缓存
const FileProgress = React.memo(({ fileInfo }) => {
  const { file, progress, status } = fileInfo;
  return (
    <div className="file-progress-item">
      <span>{file.name}</span>
      <div className="progress-bar">
        <div 
          className="progress-fill" 
          style={{ width: `${progress}%` }}
        />
      </div>
      <span>
        {status === 'done' ? '完成' : status === 'error' ? '失败' : `${progress}%`}
      </span>
    </div>
  );
});

// Portal组件，固定根容器
const UploadPortal = () => {
  const portalRoot = useRef(null);

  useEffect(() => {
    // 挂载时创建或获取Portal容器
    portalRoot.current = document.getElementById('upload-portal-root') || document.body.appendChild(document.createElement('div'));
    return () => {
      // 卸载时清理容器（可选）
      if (portalRoot.current?.parentElement) {
        portalRoot.current.parentElement.removeChild(portalRoot.current);
      }
    };
  }, []);

  if (!portalRoot.current) return null;

  return ReactDOM.createPortal(
    <div className="upload-progress-container">
      {Object.values(uploadFiles).map(fileInfo => (
        <FileProgress key={fileInfo.id} fileInfo={fileInfo} />
      ))}
    </div>,
    portalRoot.current
  );
};

为什么这样能解决问题 #

• 键值对状态：更新单个文件时只修改对应的键，React只会重新渲染该文件的进度条，不会触发整个列表的重渲染，解决Portal闪烁。
• 唯一文件ID：每个上传请求绑定专属ID，彻底避免重复上传问题；新增文件是追加状态而非覆盖，第一批文件的进度不会消失。
• 延迟删除已完成文件：减少频繁的状态删除操作，同时让用户能看到上传完成的反馈，提升体验。

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