Question

React Google Maps Api：无法读取未定义的读取‘emit’的属性

2022-04-29

4735

javascript reactjs api google-maps material-ui

我想使用 google-map-react api 包含一张地图，但总是出现以下错误：

google_map.js:428 Uncaught TypeError: Cannot read properties of undefined (reading 'emit') at o.r.componentDidUpdate (google_map.js:428:1) at commitLayoutEffectOnFiber (react-dom.development.js:23232:1) at commitLayoutMountEffects_complete (react-dom.development.js:24578:1) at commitLayoutEffects_begin (react-dom.development.js:24564:1) at commitLayoutEffects (react-dom.development.js:24502:1) at commitRootImpl (react-dom.development.js:26779:1) at commitRoot (react-dom.development.js:26638:1) at finishConcurrentRender (react-dom.development.js:25937:1) at performConcurrentWorkOnRoot (react-dom.development.js:25765:1) at workLoop (scheduler.development.js:266:1)

import React from 'react'
    import GoogleMapReact from 'google-map-react'
    import {Paper, Typography, useMediaQuery} from '@material-ui/core'
    import LocationOnOutlinedIcon from '@material-ui/icons/LocationOnOutlined';
    import Rating from "@material-ui/lab"
    import useStyles from './styles'

    
    const Map = () =>{
        const classes = useStyles();
        const isMobile= useMediaQuery("(min-width:600px)");
        const coords = {lat:0, lng:0}
        const API_KEY = "############"
        return(
            <div className={classes.mapContainer}>
               <GoogleMapReact
                    bootstrapURLKeys={{ key: API_KEY }}
                    defaultCenter={coords}
                    center={coords}
                    defaultZoom={14}
                    margin={[50, 50, 50, 50]}>
               </GoogleMapReact>
    
            </div>
        )
    }
    
    export default Map;

Answer 1

似乎这解决了该问题：

https://github.com/google-map-react/google-map-react/issues/1116#issuecomment-1150589667

否则，您可以抛出 next.config.(js/ts)

reactStrictMode: false,

Answer 2

尝试从 React 应用中删除 <React.StrictMode>。

Indrakant

2022-10-02

Answer 3

我通过将 index.js 更改为下面的代码（不删除）解决了此问题。我还使用了 react-redux，因此如果您不使用 Redux，则可以删除提供程序标签。

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import './index.css';



 ReactDOM.render(
    <React.StrictMode>
     <Provider store={store}>
      <App />
     </Provider>
    </React.StrictMode>,
    document.getElementById('root')
   );
 reportWebVitals();