未捕获的错误：地图容器已初始化

我正在使用 React JS 制作网页。我的目标是在前端显示地图。我正在使用react-leaflet npm 包来实现同样的目的。但是，我收到以下错误：

Error...

"Uncaught Error: Map container is already initialized.
at NewClass._initContainer (Map.js:1105:1)
at NewClass.initialize (Map.js:136:1)
at new NewClass (Class.js:22:1)
at MapContainer.js:10:1
at commitHookEffectListMount (react-dom.development.js:22969:1)
at invokePassiveEffectMountInDEV (react-dom.development.js:24948:1)
at invokeEffectsInDev (react-dom.development.js:27142:1)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27121:1)
at flushPassiveEffectsImpl (react-dom.development.js:26865:1)
at flushPassiveEffects (react-dom.development.js:26801:1)"

以下是我的代码：

import React from 'react'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';


const Map = () => {
return (
    <MapContainer center={[51.505, -0.09]} zoom={13}>
        <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
            <Popup>
                A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
        </Marker>
    </MapContainer>
)
}

这对我来说似乎是一个重要的问题。因此，为了完整起见，在这里回答。这是基于this https://github.com/PaulLeCam/react-leaflet/issues/936@Satya S 在评论中分享的链接。 React leaflet v3 无法与 ReactJS v18 一起使用（截至撰写此回复时，情况可能会在以后发生变化。使用this https://github.com/PaulLeCam/react-leaflet/issues/936链接进行验证），至少在使用并发模式时。 请尝试针对 ReactJS 版本 18 的 React leaflet 版本 4 alpha。