如何將 google-map-react 與 Next.js 一起使用？

Question

我不確定我做錯了什么。 我正在嘗試在我的 Next.js 應用程序中使用google-map-react 。 我幾乎逐字復制了他們的 npm 頁面上的示例。 這是代碼：

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

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

export default function SimpleMap() {
  const defaultProps = {
    center: {
      lat: 10.99835602,
      lng: 77.01502627,
    },
    zoom: 11,
  };
  
  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "MY API KEY IS HERE" }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
        <MapMarker text="My Marker" />
      </GoogleMapReact>
    </div>
  );
}

我在控制台中不斷收到此錯誤：

Uncaught TypeError: Cannot read properties of undefined (reading 'getChildren')
    at o._getState (index.modern.js?922b:1:2062)
    at new o (index.modern.js?922b:1:3935)
    at constructClassInstance (react-dom.development.js?ac89:13492:1)
    at updateClassComponent (react-dom.development.js?ac89:20423:1)
    at beginWork (react-dom.development.js?ac89:22366:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4157:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4206:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4270:1)
    at beginWork$1 (react-dom.development.js?ac89:27243:1)
    at performUnitOfWork (react-dom.development.js?ac89:26392:1)
    at workLoopSync (react-dom.development.js?ac89:26303:1)
    at renderRootSync (react-dom.development.js?ac89:26271:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25577:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)

知道發生了什么嗎？

先感謝您。

Answer 1

使用 - 從 '@react-google-maps/api' 導入 { GoogleMap, useJsApiLoader }； 反而。 同樣在返回 jsx 元素時使用括號

Answer 2

關閉嚴格模式。 可能在 next.config.js 中作為 reactStrictMode。