google-map-react not loading- Uncaught TypeError: Cannot read properties of undefined (reading 'getChildren')

Question

import React from "react";
import GoogleMapReact from "google-map-react";

const AnyReactComponent = ({ text }) => <div>{text}</div>;

export default function AppMapPage() {
  const defaultProps = {
    center: {
      lat: 10.99835602,
      lng: 77.01502627,
    },
    zoom: 11,
  };

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "my key" }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
        <AnyReactComponent lat={59.955413} lng={30.337844} text="My Marker" />
      </GoogleMapReact>
    </div>
  );
}

我一直在努力解决这个问题。我正在尝试 运行 google-map-react 的简单示例。但是，这不会加载地图。而是给出以下错误，页面为空白。

google_map_markers.js:100 Uncaught TypeError: Cannot read properties of undefined (reading 'getChildren')
    at o._getState (google_map_markers.js:100:1)
    at new o (google_map_markers.js:248:1)
    at constructClassInstance (react-dom.development.js:13522:1)
    at updateClassComponent (react-dom.development.js:20497:1)
    at beginWork (react-dom.development.js:22440:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
    at beginWork (react-dom.development.js:27405:1)
    at performUnitOfWork (react-dom.development.js:26513:1)

Answer 1

这是由于版本控制。我从 18 级降级到 17 级并且成功了。男人有时开源代码会消耗你一整天。

Answer 2

要解决这些问题，您必须删除 index.js 文件中的 *<React.StrictMode>*。

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
  <App />
  </React.StrictMode>);

到

     const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);