获取“无法将某个类作为函数调用”在我的React项目中 [英] Getting "Cannot call a class as a function" in my React Project

问题描述

我正在尝试将React地图组件添加到我的项目中，但遇到错误。我正在使用Fullstack React的博客文章作为参考。我跟踪了google_map.js第83行中的错误：

 函数_classCallCheck（实例，构造函数）{$ b $如果（！（实例instanceof构造函数））{
抛出新的TypeError（不能调用一个类作为函数）; 
 
 
 $ / code $ / pre 
 
这是我的地图组件。当我注释掉第58-60行，最后三行时，页面加载得很好（没有地图）。编辑：我做了@Dmitriy Nevzorov建议的更改，它仍然给我同样的错误。
  import从'react' 
从'google-map-react'导入GoogleApiComponent 
 $ b导出类LocationsContainer extends React.Component {
构造函数（）{
 super（）
} 
 render（）{
 const style = {
 width：'100vw'，
 height：'100vh'
} 
 return（
 < div style = {style}> 
<地图google = {this.props.google} /> 
< / div> 
）
} 
 
 
导出类Map扩展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'> 
加载地图... 
 
 
 
 
 
导出默认的GoogleApiComponent（{
 apiKey：MY_API_KEY 
}） （LocationsContainer）
  
以下是此地图组件在main.js中路由的位置：
 从'react-dom'导入{render}; 
 import从'react'反应; 
从'./components/Artists'
导入艺术家'react-router'导入{Router，Route，Link，browserHistory} 
从'./components/HomePage'$ b导入首页$ b从'./components/ArtGallery'导入图库
从'./components/ArtistPage'导入ArtistPage 
从'./components/FavsPage'导入FavsPage 
从'./导入LocationsContainer' （
< Router history = {browserHistory}> 
< Route path =/ component = {Home} /> 
< Route path =locationscomponent = {LocationsContainer} /> 
< Route path =artistscomponent = {Artists} /> 
 <路线路径=gallery组件= {图库} /> 
 <路线路径=收藏夹组件= {FavsPage} /> 
 <路线路径=： artistNamecomponent = {ArtistPage} /> 
< / Router> 
），document.getElementById（'app'））
  
 
 
解决方案
对于我来说，当我忘记在末尾写入'React.Component'时就发生了。 
我知道这不完全是你的，但其他读者可以从中获益，希望。
 
I'm trying to add a React map component to my project but run into an error. I'm using Fullstack React's blog post as a reference. I tracked down where the error gets thrown in google_map.js line 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.
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:
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'))

解决方案
For me it happened when i forgot to write 'extends React.Component' at the end.
I know it's not exactly what YOU had, but others reading this answer can benefit from this, hopefully.

                        
这篇关于获取“无法将某个类作为函数调用”在我的React项目中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！