Прослушиватель щелчков Mapbox на базовой карте завершается неудачно при добавлении слоев

Question

У меня есть карта в моем реактивном проекте, где я хочу использовать прослушиватель щелчков на базовой карте, чтобы найти координаты точки, по которой щелкнули.Некоторое время он работал хорошо.

Проблема в том, что я добавил несколько слоев, используя кластеры, некоторые из которых имеют прослушиватели щелчков, и теперь щелчок в любом месте на карте выдает ошибку «Источник уже существуетс этим идентификатором. "Я думаю, я понимаю, почему - есть щелчок, но не на любом из слоев.

Я не могу найти никакой информации о том, как сделать базовую карту слоем, и, таким образом, получить идентификатор для ее передачи в прослушиватель щелчков.Поэтому мой вопрос заключается в том, как прикрепить прослушиватель щелчков к базовой карте, в то же время используя слои, которые также могут иметь прослушиватели щелчков.

Answer 1

Так что это была большая боль!Происходило то, что я передавал функцию компоненту, который содержал прослушиватель щелчков, и эта функция изменяла состояние родительского компонента.Принимая во внимание, что это реагирует, это вызывает переопределение дочерних компонентов и, следовательно, Mapbox к ошибке, что уже был источник с тем же идентификатором, потому что источник никогда не был удален.

Решение заключалось в том, чтобы обернуть код, который добавил исходный и сопутствующий слои в качестве компонента, а затем создать компонент очистки, содержащий removeSource (см. здесь ), и запустить его при размонтировании.Я использую новый хук API, поэтому я запускаю функцию setLayers в хуке useEffect, а затем возвращаю cleanup из useEffect, но держу пари, что идея такого рода будет хорошо работать с componentDidMountи componentWillUnmount.