错误：在 React App 中使用“google-maps-react”时，您必须包含“google”道具答案

【问题标题】：Error: You must include a `google` prop when using 'google-maps-react' in React App错误：在 React App 中使用“google-maps-react”时，您必须包含“google”道具
【发布时间】：2020-10-17 15:17:12
【问题描述】：

我正在整理一个在页面内使用 Google 地图的小型反应应用程序。我已经安装了google-maps-react 依赖。谷歌地图包含在一个名为 DetailPlaqueCard 的组件中。见下文。

import React, { useEffect, useState, useRef } from 'react';
import {Link} from 'react-router-dom';
import GoogleMapReact from 'google-maps-react';

function DetailPlaqueCard({match}){
const mapRef = useRef();
useEffect(() =>{
    fetchItem();
    console.log(match)
    // eslint-disable-next-line 
},[])
const [item, setItem] = useState([]);


const mapStyles = {
    width: '25%',
    height: '25%'
  };

const fetchItem = async()=>{
    var proxyUrl = 'https://cors-anywhere.herokuapp.com/'
    // targetUrl = 'https://s3.eu-west-2.amazonaws.com/openplaques/open-plaques-london-2019-03-13.json'
    const fetchItem = await fetch(proxyUrl + `http://openplaques.org/plaques/${match.params.id}.json`)
    const item = await fetchItem.json();
    setItem(item);
    console.log(item)
}



return (
    
    <div>
        <Link to="/">
        <button>
        <i class="fas fa-arrow-left"></i>Back
        </button>
        </Link>
        <h1>Here is the detailed page</h1>
        <h2>The inscription:{item.inscription}</h2>
        <p>Address: {item.address}</p>
        <GoogleMapReact
            bootstrapURLKeys={{ key: process.env.REACT_APP_GOOGLE_KEY }}
            defaultCenter={{lat: item.latitude, lng: item.latitude}}
            defaultZoom={15}
            google={this.props.google}
            style={mapStyles}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={({map}) => {
                mapRef.current = map;
            }}
        />
    </div>
   )
  }

  export default DetailPlaqueCard;

我不确定为什么会收到此错误。我查看了documentation 并包含了它需要的属性。有什么我想念的吗？

【问题讨论】：

您似乎缺少google={} 组件上或GoogleMapReact 组件中的属性。在文档中看起来他们正在使用google={this.props.google}
添加了google={this.props.google} 现在收到以下错误TypeError: Cannot read property 'props' of undefined
据我所知，以上取决于您是自动加载 API 还是手动加载 API：手动您可以使用 google={window.google} 或者如果自动加载它，您可以导入 import {GoogleApiWrapper} from 'google-maps-react'; 并包含函数中的道具
我添加了google={window.google}，但现在没有地图，我只是得到Loading map...
确保您拥有谷歌地图平台上允许的本地主机URL。否则它将显示为开发者模式。

标签： javascript reactjs react-props google-maps-react

【解决方案1】：

安装“google-map-react”而不是“google-maps-react”。我也试图弄清楚是什么原因造成的，最后这是一个非常愚蠢的错误。我希望它能解决问题。

【讨论】：