React createElement 错误“类型无效 - 期望字符串得到对象”

Question

我在一个反应​​项目中遇到了这个问题。我正在使用 rc-upload 包在 React 中上传文件。代码如下：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
const Upload = require('rc-upload');

class App extends Component {
 constructor(props) {
 super(props);
 this.uploaderProps = {
    action: '/upload/',
    data: { user_id: 1 },
    headers: {
      Authorization: `Bearer abcdef`,
    },
    multiple: false,
    beforeUpload(file) {
      console.log(file);
    },
    onStart: (file) => {
      // console.log('onStart', file.name);
    },
    onSuccess(result) {
      console.log(result);
    },
    onProgress(step, file) {
      console.log('Progress: ', Math.round(step.percent), file.name);
    },
    onError(err) {
      // Show response data with close button in modal body
      console.log('onError', err);
    }
  };
 }
 render() {

  return (
   <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h2>Welcome to React</h2>
    </div>
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
    <Upload {...this.uploaderProps}>Choose File</Upload>
   </div>
  );
 }
}
export default App;

此代码适用于 react@15.5.4 和 react-scripts@0.9.5 以及 react 或 react-scripts 的开发依赖项。几个月前，我通过 create-react-app 创建了 react 应用程序。现在我使用 create-react-app 创建了新应用，它安装了 react@15.6.1 和 react-scripts@1.0.12。

所以当我在新项目中运行上述代码时，它会显示此错误。

React.createElement: type is invalid -- 需要一个字符串（对于 内置组件）或类/函数（用于复合组件） 但得到：对象

我发现它来自以下代码：

<Upload {...this.uploaderProps}>Choose File</Upload>

它在我以前版本的 react@15.5.4 中有效，但在 react@15.6.1 中无效

如何解决这个错误？这是版本错误还是其他依赖错误？

Answer 1

问题与 Upload 组件如何导入项目有关。这可能是组件的错误。不知道这是否有意，但您需要像这样导入组件；

const Upload = require('rc-upload').default;
// or
import Upload from 'rc-upload';