Reactjs InvalidValueError:setMap:不是Map的实例；而不是StreetViewPanorama@react谷歌地图/api的实例

我正在使用@react google maps/api，并将脚本从cdn加载到我的public directory index.html文件中

我得到

InvalidValueError:setMap:不是Map的实例；而且不是StreetViewPanorama的实例

，标记也不会出现在我的地图上。奇怪的是，得到这个错误完全是随机的。有时它工作起来没有任何问题。这是我一开始不理解的

import React, { useEffect } from 'react';
import { GoogleMap, Marker } from '@react-google-maps/api';
import mapStyles from './mapStyles';
//google map height 100
import './MapDisplay.css';

import { connect } from 'react-redux';

const mapContainerStyle = {
  height: '100%',
  width: '100%',
};
const options = {
  styles: mapStyles,
  disableDefaultUI: true,
  zoomControl: true,
};

const MapDisplay = ({
  userLocation,
  mouseHoverIdR,
  selectedInfoR,
  searchedResults,
  unAuthNoSearchResults,
  selectedLocationInfoWindowS,
}) => {
  const onClickMarker = (e) => {
    selectedLocationInfoWindowS({
      selectedInfoR: e,
      type: 'infoWindowLocations',
    });
  };
  const onClickMap = () => {
    selectedLocationInfoWindowS({
      type: '',
      selectedInfoR: {
        _id: '',
      },
    });
  };

  return (
    <div id='map'>
      <GoogleMap
        id='map_canvas'
        mapContainerStyle={mapContainerStyle}
        zoom={12}
        center={userLocation}
        options={options}
        onClick={() => onClickMap()}
      >
        {!unAuthNoSearchResults &&
          searchedResults.map((searchedResult) => {
            if (
              mouseHoverIdR === searchedResult._id ||
              selectedInfoR._id === searchedResult._id
            ) {
              var a = window.google.maps.Animation.BOUNCE;
            }

            return (
              <Marker
                position={searchedResult.coordinates}
                key={searchedResult._id}
                clickable
                onClick={() => onClickMarker(searchedResult)}
                animation={a}
                id={'hello'}
              />
            );
          })}
     
      </GoogleMap>
    </div>
  );
};

import React，{useffect}来自“React”；
从'@react google maps/api'导入{GoogleMap，Marker}；
从“./mapStyles”导入地图样式；
//谷歌地图高度100
导入“./MapDisplay.css”；
从'react redux'导入{connect}；
常量mapContainerStyle={
高度：“100%”，
宽度：“100%”，
};
常量选项={
样式：地图样式，
disableDefaultUI:true，
动物控制：对，
};
常量映射显示=({
用户位置，
老鼠王，
被选为，
搜索结果，
未经授权的结果，
已选择位置信息窗口，
}) => {
const onClickMarker=（e）=>{
selectedLocationInfoWindowS({
选择用于：e，
键入：“infoWindowLocations”，
});
};
const onClickMap=（）=>{
selectedLocationInfoWindowS({
类型：“”，
选择用于：{
_id:“”，
},
});
};
返回(
onClickMap（）}
>
{！未经授权的搜索结果&&
searchedResults.map（（searchedResult）=>{
如果(
mouseHoverIdR===searchedResult.\u id||
已选择搜索结果。\u id==searchedResult.\u id
) {
var a=window.google.maps.Animation.BOUNCE；
}
返回(
onClickMarker（searchedResult）}
动画={a}
id={'hello'}
/>
);
})}
);
};

当我试图在地图上显示标记时，我如何纠正错误？

您能在问题中添加一个显示错误的选项吗？您可以使用。您可以添加一个显示问题中错误的选项吗？你可以用。