У меня есть карта OpenLayers (5.3.2) в приложении React с набором фильтров для фильтрации местоположений, отображаемых на карте. Работает нормально, пока я не добавлю всплывающие окна с информацией о маркерах.
Всплывающие окна добавляются в DOM рядом с картой:
<Map locations={filteredLocations} />
<Popups locations={filteredLocations} />
Затем они устанавливаются как новые наложения на карте OL:
new Overlay({
element: document.getElementById(`openlayers-popup-${location.id}`)
});
Что заставляет их перемещаться внутри карты и ol-overlay-container в DOM. Карта и всплывающие окна работают на этом этапе. Если я пытаюсь выполнить какую-либо фильтрацию, которая изменяет содержимое filteredLocations и вызывает обновление всплывающих окон, я получаю эту ошибку:
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node
Я подозреваю, что это потому, что React больше не может найти всплывающие окна в том месте, в котором они изначально отображались? Как лучше всего с этим справиться? Клонирование всплывающих окон и использование их на оверлее вместо ощущения хака?