React项目使用MDDropzone报错：Uncaught Error: Dropzone already attached

这个错误是因为Dropzone实例未被正确清理，导致页面刷新时尝试在同一DOM元素上重复绑定实例。以下是修复方案和代码说明：

修复后的MDDropzone组件代码 #

import { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import { MDDropzoneRoot, MDBox } from '@mui/material';
import Dropzone from 'dropzone';

// 全局仅设置一次，避免组件重复渲染时反复修改
Dropzone.autoDiscover = false;

function MDDropzone({ options }) {
  const [controller] = useMaterialUIController();
  const { darkMode } = controller;

  const dropzoneRef = useRef();
  // 用ref单独跟踪当前组件的Dropzone实例
  const dropzoneInstanceRef = useRef(null);

  useEffect(() => {
    // 确保DOM元素已挂载再创建实例
    if (!dropzoneRef.current) return;

    function createDropzone() {
      const instance = new Dropzone(dropzoneRef.current, { ...options });
      dropzoneInstanceRef.current = instance;
      return instance;
    }

    function removeDropzone() {
      // 只销毁当前组件创建的实例，不影响其他组件的Dropzone
      if (dropzoneInstanceRef.current) {
        dropzoneInstanceRef.current.destroy();
        dropzoneInstanceRef.current = null;
      }
    }

    createDropzone();

    // 组件卸载或options变化时清理实例
    return () => removeDropzone();
  }, [options]);

  return (
    <MDDropzoneRoot
      component="form"
      action="/file-upload"
      ref={dropzoneRef}
      className="form-control dropzone"
      ownerState={{ darkMode }}
    >
      <MDBox className="fallback" bgColor="transparent">
        <MDBox component="input" name="file" type="file" multiple />
      </MDBox>
    </MDDropzoneRoot>
  );
}

MDDropzone.propTypes = {
  options: PropTypes.objectOf(PropTypes.any).isRequired,
};

export default MDDropzone;

关键修改说明 #

• 全局设置autoDiscover：将Dropzone.autoDiscover = false移到组件外部，避免每次组件渲染重复修改配置，防止Dropzone自动绑定页面元素引发冲突。
• 实例独立跟踪：新增dropzoneInstanceRef保存当前组件的Dropzone实例，替代原代码中销毁所有实例的逻辑，避免影响页面其他Dropzone组件。
• 空引用校验：创建实例前先检查DOM元素是否存在，防止DOM未挂载时触发无效操作。
• 精准清理：组件卸载时仅销毁当前实例，确保DOM元素上的绑定完全清除，刷新时不会出现重复绑定错误。

额外提示 #

• 确认项目中Dropzone依赖版本与Creative Tim套件兼容，避免版本冲突引发异常。
• 若页面存在多个MDDropzone组件，修改后的代码会让每个组件独立管理自身实例，互不干扰。

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