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

问题描述

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

function _classCallCheck(instance, Constructor) {if (!(instance of Constructor)) {throw new TypeError("不能将类作为函数调用");}}

到目前为止，这是我的地图组件.当我注释掉最后三行 58-60 行时，页面加载得很好(没有地图).我做了@Dmitriy Nevzorov 建议的更改，但它仍然给我同样的错误.

从 'react' 导入 React从google-map-react"导入 GoogleApiComponent导出类 LocationsContainer 扩展 React.Component {构造函数(){极好的()}使成为() {常量样式 = {宽度:'100vw'，高度:'100vh'}返回 (<div style={style}><地图 google={this.props.google}/>

)}}导出类 Map 扩展 React.Component {componentDidUpdate(prevProps, prevState){if (prevProps.google !== this.props.google){this.loadMap();}}componentDidMount(){this.loadMap();}加载映射(){如果(this.props && this.props.google){const {google} = this.props;const 地图 = google.maps;const mapRef = this.refs.map;const node = ReactDOM.findDOMNode(mapRef);让缩放= 14;让纬度 = 37.774929让 lng = 122.419416const center = new maps.LatLng(lat, lng);const mapConfig = Object.assign({}, {中心:中心，缩放:缩放})this.map = new maps.Map(node, mapConfig)}}使成为() {返回 (<div ref='地图'>正在加载地图...

)}}导出默认的 GoogleApiComponent({apiKey: MY_API_KEY})(位置容器)

这里是这个地图组件在 main.js 中被路由的地方:

import {render} from 'react-dom';从反应"导入反应；从./components/Artists"导入艺术家从反应路由器"导入{路由器，路由，链接，浏览器历史}从./components/HomePage"导入主页从./components/ArtGallery"导入画廊从 './components/ArtistPage' 导入 ArtistPage从 './components/FavsPage' 导入 FavsPage从 './components/Locations' 导入 LocationsContainer//创建路由配置使成为((<路由器历史={browserHistory}><Route path="/" component={Home}/><Route path="locations" component={LocationsContainer}/><Route path="artists" component={Artists}/><Route path="gallery" 组件={画廊}/><Route path="favorites" component={FavsPage}/><Route path=":artistName" component={ArtistPage}/></路由器>), document.getElementById('app'))

解决方案

对我来说，这发生在我最后忘记写 extends 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屋！