Неперехваченная ошибка: контейнер карты уже инициализирован

Я использую React JS для создания веб-страницы. Моя цель - отобразить карту в интерфейсе. Для этого я использую пакет npm react-leaflet. Однако я получаю следующую ошибку:

Ошибка...

"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>
)
}

Какая у вас версия React и брошюры? Похоже на проблему несоответствия версий. Пожалуйста, обратитесь - github.com/PaulLeCam/react-leaflet/issues/936

Satya S 09.04.2022 17:17

Я использую «листовку»: «^ 1.7.1», «реагировать»: «^ 18.0.0»

piyush kasturi 09.04.2022 18:09
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
2
2
43
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мне кажется важным вопрос. Следовательно, отвечая здесь для полноты картины. Это основано на ссылке это, которой поделился @Satya S в комментариях. Leaflet-js v3 не будет работать с reactJS v18 (на момент написания этого ответа все может измениться позже. Используйте ссылку это для проверки), по крайней мере, при использовании параллельного режима. Пожалуйста, попробуйте альфа-версию 4 leaflet-js, предназначенную для версии 18 reactJS.

Вероятно, вы ссылаетесь на версии 3 и 4 Реагировать Листовка вместо Leaflet.js (который в настоящее время имеет версию 1.7.1).

ghybs 10.04.2022 19:16

Другие вопросы по теме