google-map-react 未加载-未捕获类型错误：无法读取未定义的属性（读取“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$1 (react-dom.development.js:27405:1)
    at performUnitOfWork (react-dom.development.js:26513:1)

Answer 1

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

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

到

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

Answer 2

这是由于版本控制。我从18降级到17，它起作用了。有时开源代码会消耗你一整天的时间。