Question

我正在关注使用Google Maps api实施React的在线教程。我一直在尝试构建我的地图组件，我按照指示完全按照说明进行操作。但是，当我尝试在浏览器中加载页面时，没有显示任何内容，并且存在一些我难以解决的控制台错误。

以下是我的简单HTML页面

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=visualization"></script>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="build/bundle.js" ></script>
    </body>
</html>

这是我的app.js文件

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Map from './components/Map'
import Places from './components/Places'

class App extends Component {
    render() {
        const location = {
            lat: 28.5962,
            lng: 81.3064
        }

        return (
            <div>
                This is the REACT APP!
                <div style={{width: 300, height:600, background: '#777'}}>
                    <Map center={location} />
                </div>

                <Places />
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

以下是我认为导致问题的Map.js文件。

import React, { Component } from 'react';
import { GoogleMapLoader, GoogleMap, Marker } from 'react-google-maps';
import GoogleMapLoader from "react-google-maps-loader"

class Map extends Component {
    render(){
        const mapContainer = <div style={{height: '100%', width:'100%'}}></div>

        return (
            <GoogleMapLoader
                containerElement = { mapContainer }
                googleMapElement =  {
                    <GoogleMap
                        defaultZoom={15}
                        defaultCenter={this.props.center}
                        options={{streetViewControl: false, mapTypeControl: false}}>
                    </GoogleMap>
                } />
        )
    }
}

export default Map

这是我的webpack.config.js文件，它将我的JSX代码发送到ES2015

let webpack = require("webpack");
let path = require('path');

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        filename: 'build/bundle.js',
        sourceMapFilename: 'build/bundle.map'
    },
    devtool: '#source-map',
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query:{
                    presets:['react', 'es2015']
                }
            }
        ]
    }
}

这是一个小提琴，其中包含链接到我的html页面的bundle.js代码。

Fiddle containing bundle.js code

当我尝试在浏览器中打开时，出现以下控制台错误

警告：React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查Map的渲染方法。      在地图中（由App创建）      在div（由App创建）      在div（由App创建）      在App   invariant.js：49未捕获错误：元素类型无效：预期字符串（对于内置组件）或类/函数（对于复合组件）＆gt;但得到：undefined。您可能忘记从其定义的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查Map的渲染方法。      在不变量（invariant.js：42）      在createFiberFromElement（react-dom.development.js：5753）      at reconcileSingleElement（react-dom.development.js：7531）      at reconcileChildFibers（react-dom.development.js：7635）      at reconcileChildrenAtExpirationTime（react-dom.development.js：7756）      在reconcileChildren（react-dom.development.js：7747）      在finishClassComponent（react-dom.development.js：7881）      在updateClassComponent（react-dom.development.js：7850）      在beginWork（react-dom.development.js：8225）      at performUnitOfWork（react-dom.development.js：10224）   react-dom.development.js：9747组件中出现上述错误：      在地图中（由App创建）      在div（由App创建）      在div（由App创建）      在App

react-dom.development.js：10994未捕获错误：元素类型无效：预期字符串（对于内置组件）或类/函数（对于＆gt;复合组件）但得到：undefined。您可能忘记从其定义的文件中导出＆gt;您的组件，或者您可能混淆了默认导入和命名导入。

检查Map的渲染方法。      在不变量（invariant.js：42）      在createFiberFromElement（react-dom.development.js：5753）      at reconcileSingleElement（react-dom.development.js：7531）      at reconcileChildFibers（react-dom.development.js：7635）      at reconcileChildrenAtExpirationTime（react-dom.development.js：7756）      在reconcileChildren（react-dom.development.js：7747）      在finishClassComponent（react-dom.development.js：7881）      在updateClassComponent（react-dom.development.js：7850）      在beginWork（react-dom.development.js：8225）      在performUnitOfWork（react-dom.development.js：10224）

我认为问题出在GoogleMapLoader上，这就是为什么我为react-google-maps-loader添加了一个导入，但显然不是这样。我也从使用Webstorm切换到Sublime Text，因为我读过Webstorm将JSX转换为ES2015代码的问题，但这也不是问题。有什么我想念的吗？

Answer 1

您遇到的错误表明React.createElement正在接收未定义的而不是组件实例或内置元素字符串（例如'div'）。最常见的可能性之一是您忘记安装react-google-maps包（已经发生在我身上几次）。

此外，在初始化Map组件之前，您需要将其包装在名为withGoogleMap的高阶组件下。

import { GoogleMap, Marker, withGoogleMap } from "react-google-maps"

const Map = withGoogleMap((props) => 
   <GoogleMap {...props} />

export default Map;

此插件还包含一个名为withScriptjs的HOC，以防您在关闭正文标记之前未添加Google地图脚本：

import { GoogleMap, Marker, withGoogleMap, withScriptjs } from "react-google-maps"

const Map = withScriptjs(withGoogleMap(props => 
    <GoogleMap {...props} />

export default Map;

此处提供更多信息：https://tomchentw.github.io/react-google-maps/。

React - Google地图无法加载

1 个答案: