Question

google-map-react 未加载-未捕获的类型错误：无法读取未定义的属性（读取“getChildren”）

2022-05-04

7502

google-map-react

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

要解决这些问题，您必须删除 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 />);

Answer 2

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

Suraj Regmi

2022-05-04

Answer 3

我刚刚删除了 index.js 文件中的 <React.StrictMode> ，它对我有用。

Dinuka Dilshan

2022-08-02