Javascript 错误：使用'时必须包含“google”道具；谷歌地图反应'；在React应用程序中

我正在组装一个小的react应用程序，在页面中使用谷歌地图。我已经安装了

googlemaps-react

dependency。谷歌地图包含在一个名为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;

import React，{useffect，useState，useRef}来自'React'；
从'react router dom'导入{Link}；
从“谷歌地图反应”导入谷歌地图反应；
函数DetailPlaqueCard（{match}）{
const mapRef=useRef（）；
useffect（（）=>{
fetchItem（）；
console.log（匹配）
//eslint禁用下一行
},[])
const[item，setItem]=useState（[]）；
常量映射样式={
宽度：“25%”，
身高：25%
};
const fetchItem=async（）=>{
变量proxyUrl=https://cors-anywhere.herokuapp.com/'
//targetUrl=https://s3.eu-west-2.amazonaws.com/openplaques/open-plaques-london-2019-03-13.json'
const fetchItem=等待获取（proxyUrl+`http://openplaques.org/plaques/${match.params.id}.json`）
const item=wait fetchItem.json（）；
设置项目（项目）；
console.log（项目）
}
返回(
返回
这是详细的页面
铭文：{item.edinting}
地址：{item.Address}

{
mapRef.current=map；
}}
/>
)
}
导出默认明细卡片；

我不确定为什么会出现这个错误。我已经看过了，包括它需要的属性。我有什么遗漏吗？

---

您似乎缺少

google={}

组件上或

GoogleMapReact

组件中的

google={}

道具。在文档中，他们似乎正在使用

google={this.props.google}

added

google={this.props.google}

现在出现以下错误

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

从我所看到的上面的内容取决于您是自动加载API还是手动加载API：手动您可以使用

google={window.google}

或者如果自动加载它，您可以导入

import{GoogleApiWrapper}来自“谷歌地图反应”和在你的函数中包含道具我添加了
google={window.google}
，错误已经存在，但是现在没有地图，我只是得到
加载地图…