Javascript 在我的 React 项目中获取“无法将类作为函数调用”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38481857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting "Cannot call a class as a function" in my React Project
提问by Mike Fleming
I'm trying to add a React map component to my project but run into an error. I'm using Fullstack React's blog postas a reference. I tracked down where the error gets thrown in google_map.js line 83:
我正在尝试将 React 地图组件添加到我的项目中，但遇到错误。我使用 Fullstack React 的博客文章作为参考。我在 google_map.js 的第 83 行找到了错误在哪里被抛出：
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
Here is my map component so far. The page loads just fine (without a map) when I comment out lines 58-60, the last three lines. edit: I made the changes that @Dmitriy Nevzorov suggested and it still gives me the same error.
到目前为止，这是我的地图组件。当我注释掉最后三行 58-60 行时，页面加载得很好（没有地图）。编辑：我做了@Dmitriy Nevzorov 建议的更改，但它仍然给我同样的错误。
import React from 'react'
import GoogleApiComponent from 'google-map-react'
export class LocationsContainer extends React.Component {
constructor() {
super()
}
render() {
const style = {
width: '100vw',
height: '100vh'
}
return (
<div style={style}>
<Map google={this.props.google} />
</div>
)
}
}
export class Map extends React.Component {
componentDidUpdate(prevProps, prevState){
if (prevProps.google !== this.props.google){
this.loadMap();
}
}
componentDidMount(){
this.loadMap();
}
loadMap(){
if (this.props && this.props.google){
const {google} = this.props;
const maps = google.maps;
const mapRef = this.refs.map;
const node = ReactDOM.findDOMNode(mapRef);
let zoom = 14;
let lat = 37.774929
let lng = 122.419416
const center = new maps.LatLng(lat, lng);
const mapConfig = Object.assign({}, {
center: center,
zoom: zoom
})
this.map = new maps.Map(node, mapConfig)
}
}
render() {
return (
<div ref='map'>
Loading map...
</div>
)
}
}
export default GoogleApiComponent({
apiKey: MY_API_KEY
})(LocationsContainer)
And here is where this map component gets routed in main.js:
这是地图组件在 main.js 中路由的地方：
import {render} from 'react-dom';
import React from 'react';
import Artists from './components/Artists'
import { Router, Route, Link, browserHistory } from 'react-router'
import Home from './components/HomePage'
import Gallery from './components/ArtGallery'
import ArtistPage from './components/ArtistPage'
import FavsPage from './components/FavsPage'
import LocationsContainer from './components/Locations'
//Create the route configuration
render((
<Router history={browserHistory}>
<Route path="/" component={Home} />
<Route path="locations" component={LocationsContainer} />
<Route path="artists" component={Artists} />
<Route path="gallery" component={Gallery} />
<Route path="favorites" component={FavsPage} />
<Route path=":artistName" component={ArtistPage} />
</Router>
), document.getElementById('app'))
回答by programmer
For me it happened when I forgot to write extends React.Componentat the end.
I know it's not exactly what YOU had, but others reading this answer can benefit from this, hopefully.
对我来说，它发生在我最后忘记写extends React.Component的时候。我知道这并不完全是您所拥有的，但希望其他阅读此答案的人可以从中受益。
回答by William Park
For me it was because I forgot to use the newkeyword when setting up Animated state.
对我来说，这是因为我new在设置动画状态时忘记使用关键字。
eg:
例如：
fadeAnim: Animated.Value(0),
fadeAnim: Animated.Value(0),
to
到
fadeAnim: new Animated.Value(0),
fadeAnim: new Animated.Value(0),
would fix it.
会修复它。
回答by totymedli
tl;dr
tl;博士
If you use React Router v4 check your <Route/>component if you indeed use the componentprop to pass your class based React component!
如果您使用 React Router v4，请检查您的<Route/>组件是否确实使用了componentprop 来传递基于类的 React 组件！
More generally: If your class seems ok, check if the code that calls it doesn't try to use it as a function.
更一般地说：如果您的类看起来不错，请检查调用它的代码是否没有尝试将其用作函数。
Explanation
解释
I got this error because I was using React Router v4 and I accidentally used the renderprop instead of the componentone in the <Route/>component to pass my component that was a class. This was a problem, because renderexpects (calls) a function, while componentis the one that will work on React components.
我得到这个错误，因为我是用路由器做出反应v4和我无意中使用的render道具，而不是component一个在<Route/>分量通过我的组件，这是一类。这是一个问题，因为render期望（调用）一个函数，而这个函数component可以在 React 组件上工作。
So in this code:
所以在这段代码中：
<HashRouter>
<Switch>
<Route path="/" render={MyComponent} />
</Switch>
</HashRouter>
The line containing the <Route/>component, should have been written like this:
包含<Route/>组件的行应该这样写：
<Route path="/" component={MyComponent} />
It is a shame, that they don't check it and give a usable error for such and easy to catch mistake.
很遗憾，他们没有检查它，并为这种容易发现的错误提供可用的错误。
回答by Dan Balaban
Happened to me because I used
发生在我身上，因为我用过
PropTypes.arrayOf(SomeClass)
PropTypes.arrayOf(SomeClass)
instead of
代替
PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))
PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))
回答by Dmitriy Nevzorov
You have duplicated export defaultdeclaration. The first one get overridden by second one which is actually a function.
您有重复的export default声明。第一个被第二个覆盖，实际上是一个函数。
回答by Jam
I experienced the same issue, it occurred because my ES6component class was not extending React.Component.
我遇到了同样的问题，这是因为我的ES6组件类没有扩展React.Component.
回答by codersaif
For me, it was ComponentName.prototypeinstead of ComponentName.propTypes.
auto suggested by PhpstormIDE. Hope it will help someone.
对我来说，它ComponentName.prototype不是ComponentName.propTypes. auto 由PhpstormIDE建议。希望它会帮助某人。
回答by jeff ayan
Mostly these issues occur when you miss extending Componentfrom react:
大多数情况下，当您错过从 react扩展Component时会发生这些问题：
import React, {Component} from 'react'
export default class TimePicker extends Component {
render() {
return();
}
}
回答by Onengiye Richard
For me it was because i used prototype instead of propTypes
对我来说这是因为我使用原型而不是propTypes
class MyComponent extends Component {
render() {
return <div>Test</div>;
}
}
MyComponent.prototype = {
};
it ought to be
应该是
MyComponent.propTypes = {
};
回答by Mbanda
Post.proptypes = {
}
to
到
Post.propTypes = {
}
someone should comment on how to monitor such error in a very precise way.
有人应该评论如何以非常精确的方式监控此类错误。
