при изменении стейта карта не обновляется, а добавляется еще одна (react, redux, react-yandex-maps)
Такая проблема: меняю состояние currentService в другом компоненте, чтобы сработал фильтр, фильтр срабатывает, но рисуется еще одна карта, а предыдущая никуда не девается. Спасибо.
import {useEffect, useRef} from 'react';
import {useYMaps} from "@pbe/react-yandex-maps";
import {connect} from "react-redux";
const CustomMap = (props) => {
let mapRef = useRef(null);
const ymaps = useYMaps(["package.full"]);
useEffect(() => {
if (!ymaps || !mapRef.current) {
return;
}
const myMap = new ymaps.Map(mapRef.current, {
center: [55.76, 37.64],
zoom: 10
});
const objectManager = new ymaps.ObjectManager({
clusterize: true,
gridSize: 64,
clusterIconLayout: "default#pieChart"
});
objectManager.add(props.points);
objectManager.setFilter((object) => {
// console.log(object.pointType + " " + props.currentService)
return object.pointType === props.currentService;
})
myMap.geoObjects.add(objectManager);
myMap.controls.remove('typeSelector');
myMap.controls.remove('geolocationControl');
myMap.controls.remove('fullscreenControl');
myMap.controls.remove('routeButton');
myMap.controls.remove('trafficControl');
myMap.controls.remove('searchControl');
}, [ymaps, props.currentService]);
return (
<div ref={mapRef} style={{ width: "100%", height: "100%", position:"relative" }} >
</div>
);
};
function makeStateToProps(state) {
const {points, currentService} = state.commonReducer;
return {
points,
currentService
}
}
export default connect(makeStateToProps)(CustomMap);