如何确保React组件中文件上传初始化代码仅执行一次？

你遇到的问题是因为React StrictMode在开发环境中会两次执行副作用函数，加上HMR热更新时组件重新挂载，导致每次都新建了FileUploadWithPreview实例，从而出现多个控件。要让初始化代码只执行一次，需要做好副作用清理，同时用useRef持久化实例：

import { useState, useEffect, useRef } from 'react';

export default function YourUploadComponent({ multiple }) {
  const uploadFieldRef = useRef(null);

  useEffect(() => {
    // 仅当实例未创建时执行初始化
    if (!uploadFieldRef.current) {
      uploadFieldRef.current = new FileUploadWithPreview('fileUpload', {
        multiple: multiple,
      });

      const handleImageAdded = (e) => {
        const { detail } = e;
        console.log('detail', detail);
      };

      window.addEventListener(Events.IMAGE_ADDED, handleImageAdded);

      // 组件卸载/重渲染时清理资源
      return () => {
        uploadFieldRef.current?.destroy();
        window.removeEventListener(Events.IMAGE_ADDED, handleImageAdded);
        uploadFieldRef.current = null;
      };
    }
  }, [multiple]);

  return (
    <div id="fileUpload"></div>
  );
}

关键处理细节： #

• 用useRef持久化实例：useRef的current属性不会随组件重渲染重置，能保证实例只被创建一次。
• 添加清理逻辑：调用实例的destroy()方法（该库内置的销毁API），同时移除事件监听，避免内存泄漏和残留控件。
• 实例存在性判断：防止StrictMode双重执行、HMR热更新时重复创建实例。

另外要确保页面中id="fileUpload"的容器唯一，避免多个组件实例冲突。

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