反应 createElement 错误 "type is invalid -- expected a string got object"
React createElement error "type is invalid -- expected a string got object"
我在一个 React 项目中遇到过这个问题。我正在使用 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 -- expected a string (for
built-in components) or a class/function (for composite components)
but got: object
我发现它来自以下代码:
<Upload {...this.uploaderProps}>Choose File</Upload>
它在我以前的 react@15.5.4 版本中有效,但在 react@15.6.1 中无效
如何解决这个错误?这是版本错误还是任何其他依赖性错误?
问题与上传组件如何导入项目有关。这可能是组件的错误。不知道这是不是有意为之,但您需要像这样导入组件;
const Upload = require('rc-upload').default;
// or
import Upload from 'rc-upload';
我在一个 React 项目中遇到过这个问题。我正在使用 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 -- expected a string (for built-in components) or a class/function (for composite components) but got: object
我发现它来自以下代码:
<Upload {...this.uploaderProps}>Choose File</Upload>
它在我以前的 react@15.5.4 版本中有效,但在 react@15.6.1 中无效
如何解决这个错误?这是版本错误还是任何其他依赖性错误?
问题与上传组件如何导入项目有关。这可能是组件的错误。不知道这是不是有意为之,但您需要像这样导入组件;
const Upload = require('rc-upload').default;
// or
import Upload from 'rc-upload';