使用Uppy/React的Dashboard组件时遇TypeScript类型错误求助

你的错误根源在于两个核心问题：

• 导入的Dashboard并非React组件，而是Uppy的核心插件类；
• 传给Dashboard的uppy属性是Uppy类本身，不是实例化后的对象，且创建的Uppy实例未被保留，会被立即回收。

修正步骤： #

1. 安装@uppy/react包（如果还没安装）：

npm install @uppy/react
# 或者
yarn add @uppy/react

2. 替换导入路径：从@uppy/react导入React版本的Dashboard组件，同时可以使用useUppy钩子来更优雅地管理Uppy实例。

3. 修正Uppy实例的创建与传递：使用useUppy创建实例，确保实例不会被销毁，并且传递给Dashboard的是实例而非类。

完整修正代码： #

import { useUppy, useEffect } from '@uppy/react';
import Dashboard from '@uppy/react/lib/Dashboard';
import '@uppy/core/dist/style.css';
import '@uppy/dashboard/dist/style.css';

export const UppyX = () => {
  // 使用useUppy钩子创建并管理Uppy实例
  const uppy = useUppy(() => ({
    autoProceed: false,
    allowMultipleUploads: false,
    restrictions: {
      minNumberOfFiles: null,
      allowedFileTypes: [".xlsx"]
    }
  }));

  // 绑定并清理complete事件监听，避免重复绑定
  useEffect(() => {
    const onComplete = () => console.log("YAH");
    uppy.on("complete", onComplete);
    
    return () => {
      uppy.off("complete", onComplete);
    };
  }, [uppy]);

  return (
    <div>
      <Dashboard
        uppy={uppy}
        proudlyDisplayPoweredByUppy={false}
        showProgressDetails={true}
      />
    </div>
  );
}

关键改动说明： #

• 从@uppy/react导入React专用的Dashboard组件，而非@uppy/dashboard里的插件类；
• 使用useUppy钩子创建Uppy实例，该钩子会自动处理实例的生命周期，避免内存泄漏；
• 通过useEffect绑定并清理事件监听，防止重复绑定；
• 传递给Dashboard的uppy属性是实例化后的对象，而非Uppy类本身。

如果不想使用useUppy钩子，也可以手动用useRef保存实例：

import { useRef, useEffect } from 'react';
import Uppy from '@uppy/core';
import Dashboard from '@uppy/react/lib/Dashboard';
import '@uppy/core/dist/style.css';
import '@uppy/dashboard/dist/style.css';

export const UppyX = () => {
  const uppyRef = useRef<Uppy | null>(null);

  useEffect(() => {
    uppyRef.current = new Uppy({
      autoProceed: false,
      allowMultipleUploads: false,
      restrictions: {
        minNumberOfFiles: null,
        allowedFileTypes: [".xlsx"]
      }
    });

    const onComplete = () => console.log("YAH");
    uppyRef.current.on("complete", onComplete);

    return () => {
      uppyRef.current?.off("complete", onComplete);
      uppyRef.current?.close();
    };
  }, []);

  return (
    <div>
      {uppyRef.current && (
        <Dashboard
          uppy={uppyRef.current}
          proudlyDisplayPoweredByUppy={false}
          showProgressDetails={true}
        />
      )}
    </div>
  );
}

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