React - Google Map 无法加载-Java 学习之路

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

下面是我简单的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的render方法 . 在 Map 中（由App创建）在div中（由App创建）在div中（由App创建）在App invariant.js中：49未捕获错误：元素类型无效：预期字符串（对于内置组件）或类/函数（对于复合组件）>但得到：未定义 . 您可能忘记从其定义的文件中导出组件，或者您可能混淆了默认导入和命名导入 . 检查Map的render方法 . 在invcileSildElement（react-dom.development.js：7531）的reconcileSingleFlement上的invcileChildFibers（react-dom.development.js：7635）处于invcileChildrenAtExpirationTime的invariant（invariant.js：42）（react-dom.development.js：7756）在reconCileChildren（react-dom.development.js：7747）的finishClassComponent（react-dom.development.js：7881）的updateClassComponent（react-dom.development.js：7850） at beginWork（react-dom.development.js：8225）at performUnitOfWork（react-dom.development.js：10224）react-dom.development.js：9747上述错误发生在组件中：在Map中（由App创建）在div中（由App创建）在div中（由App创建）在App react-dom.development.js：10994未捕获错误：元素类型无效：期望字符串（对于内置组件）或类/函数（对于>复合组件）但得到：未定义 . 您可能忘记从其定义的文件中导出>您的组件，或者您可能混淆了默认导入和命名导入 . 检查Map的render方法 . 在invcileSildElement（react-dom.development.js：7531）的reconcileSingleFlement上的invcileChildFibers（react-dom.development.js：7635）处于invcileChildrenAtExpirationTime的invariant（invariant.js：42）（react-dom.development.js：7756）在reconCileChildren（react-dom.development.js：7747）的finishClassComponent（react-dom.development.js：7881）的updateClassComponent（react-dom.development.js：7850） at beginWork（react-dom.development.js：8225）at performUnitOfWork（react-dom.development.js：10224）

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

1 回答

0
您遇到的错误表明 React.createElement 正在接收undefined而不是组件实例或内置元素字符串（例如'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 Maps脚本：
```
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/ .
回复于 2024-05-09T13:33:10+08:00

React - Google Map 无法加载

1 回答

相关问题