TypeError：尝试使用 google-maps-react 时无法读取未定义的属性“数组”答案

【问题标题】：TypeError: Cannot read property 'array' of undefined when trying to use google-maps-reactTypeError：尝试使用 google-maps-react 时无法读取未定义的属性“数组”
【发布时间】：2018-03-19 16:25:30
【问题描述】：

我是 ReactJS 新手，但熟悉 React Native。我正在尝试显示一个基本的地图组件。

我的地图组件是

WaterMapView.js

import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';

export class WaterMapView extends Component {
    render () {
        console.log(' I am here ');
        return (
            <Map
                google={this.props.google}
                style={styles.mapStyle}
                initialCenter={{
                    lat: 40.854885,
                    lng: -88.081807
                        }}
                zoom={15}
            />
        )
    }
}

const styles = {
    mapStyle: {
        height: '100%',
        width: '100%'
    }
}
export default GoogleApiWrapper({
  apiKey: 'AIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
})(WaterMapView)

该组件嵌入 MainDashboard.js 如下：

import React, { Component } from 'react';
import windowSize from 'react-window-size';
import WaterMapView from './WaterMapView';

class MainDashboard extends Component {
  render () {
  const height = this.props.windowHeight;
  const {
      containerStyle,
      headerStyle,
      navigationStyle,
      mainPageStyle,
      eventPageStyle,
      mapPageStyle,
      mapDisplayStyle,
      mapPropertiesStyle
    } = styles; 

  return (
    <div style={{ ...containerStyle, height }} >
      <div style={headerStyle} >
      </div>
      <div style={navigationStyle} >
      </div>
      <div style={mainPageStyle} >
        <div style={eventPageStyle} >
        </div>
        <div style={mapPageStyle} >
            <div style={mapDisplayStyle} >
                <WaterMapView />
            </div>
            <div style={mapPropertiesStyle} >
            </div>

        </div>
      </div>
    </div>
    );
  };
};

我的 App.js 组件是：

import React from 'react';
import MainDashboard from './MainDashboard'; 

const App = () => {
        return (
            <div>
                <MainDashboard />
            </div>
        )
};

export default App

而 index.js 是：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './Components/App';
import registerServiceWorker from './registerServiceWorker';


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

我正在使用 React 16.0.0 版和 google-maps-react 1.1.0 版

我收到一个错误并伴有代码转储。错误是：

TypeError: 无法读取未定义的属性“数组”

我没有在这篇文章中包含转储。如果需要，我可以添加。

这个问题似乎非常基本，因为我什至没有在 WaterMapView.js 组件中看到 console.log 语句“我在这里”。

让我知道我错过了什么。

【问题讨论】：

我有同样的错误代码：```` ````
我也有同样的错误，在添加google-maps-reactimport时出现。

标签： reactjs google-maps-react

【解决方案1】：

<div style={mapDisplayStyle} >
                WaterMapView
</div>

应该是

<div style={mapDisplayStyle} >
  <WaterMapView />
</div>

否则 react 只是将 WaterMapView 解释为字符串并显示该字符串。当您想使用/渲染组件时，您需要将添加到 id。

【讨论】：

是的。我抓住了那个。但是更正它不会对错误产生任何影响。错误依旧。