Обновление точек на React Яндекс карте

Question

Имеется такая задача:
Есть яндекс карта с приходящим из вне массивом данных, из них я формирую балуны(точки) на карте, проблема заключается в том что я не понимаю как обновлять точки когда изменяется массив, к примеру при фильтрации. Я предполагаю надо как то сносить весь массив и грузить новый через useState, но вот как это делать?

Разжуйте как правильно обращаться к экземпляру карты и добираться до точек так, что бы при изменении карта обновлялась Использую pbe-react-yandex-maps

Ссылка на тестовый код https://codesandbox.io/s/silly-brook-5uo1hi?file=/src/MapYa.jsx:124-130

const {StrictMode, Fragment, useState} = React;
const {createRoot} = ReactDOM;
const {YMaps, Map, ObjectManager, Placemark} = ReactYandexMaps;

const MapYa = ({ points }) => {
  const [aItem, setAitem] = useState(points);

  const onItemPush = () => {
    setAitem.push({
      id: "2",
      coordinates: [61.699623, 30.690952],
      title: "Пристань Метеоров"
    });
  };
  const onItemDelete = () => {
    setAitem([]);
  };
  const mapState = {
    center: [61.700265, 30.689362],
    zoom: 15.4,
    behaviors: ["default", "scrollZoom"]
  };
  const collection = {
    type: "FeatureCollection",
    features: aItem.map((point, id) => {
      return {
        id: id,
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: point.coordinates
        },
        properties: {
          balloonContent: `
          <div>${point.title}</div>
        `,
          clusterCaption: `Метка №${id + 1}`
        }
      };
    })
  };

  return (
    <Fragment>
      <YMaps>
        <Map width="500px" height="500px" state={mapState}>
          <Placemark geometry={[61.702423, 30.688193]} />
          <ObjectManager
            objects={{
              openBalloonOnClick: true
            }}
            clusters={{}}
            options={{
              clusterize: true,
              gridSize: 32
            }}
            defaultFeatures={collection}
            modules={[
              "objectManager.addon.objectsBalloon",
              "objectManager.addon.clustersBalloon"
            ]}
          />
        </Map>
      </YMaps>
      <button onClick={() => onItemPush()}>Push</button>
      <button onClick={() => onItemDelete()}>Delete</button>
    </Fragment>
  );
};

function App() {
  const points = [
    {
      id: "1",
      coordinates: [61.703602, 30.680139],
      title: "Железнодорожная станция"
    },
    {
      id: "2",
      coordinates: [61.699623, 30.690952],
      title: "Пристань Метеоров"
    },
    {
      id: "3",
      coordinates: [61.705707, 30.672616],
      title: "Парк Ваккасалми"
    }
  ];

  return (
    <div className="App">
      <MapYa points={points} />
    </div>
  );
}


const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

.App {
  font-family: sans-serif;
  text-align: center;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-yandex-maps/dist/production/react-yandex-maps.umd.js"></script>

Answer 1

По итогу решил это так:

Приходящий массив ловим в useState и закидываем его в features а не в defaultFeatures как было изначально, далее отслеживаем через useEffect изменение приходящего массива, записываем его опять в useState

const SightseeingYandexMap = () => {
  const aTypes = useSelector(
    ({ sightseeingList }) => sightseeingList.filteredPoints
  );

  const collectionUp = (aTypes) => {
    let points = [];
    aTypes.map((item) => {
      // формируем массив
      points.push(i);
    });
    setFeatures(points);
  };
  const [state, setState] = React.useState(centralPoint);
  const [features, setFeatures] = React.useState([]);
  return (
      <>
        <YMaps>
          <Map
            width='100%'
            height='100%'
            state={mapState}
          >
            <ObjectManager
              objects={{
                openBalloonOnClick: true,
              }}
              clusters={{}}
              options={{
                clusterize: true,
                gridSize: 32,
              }}
              features={{ type: 'FeatureCollection', features: features }}
              modules={[
                'objectManager.addon.objectsBalloon',
                'objectManager.addon.clustersBalloon',
              ]}
            />
          </Map>
        </YMaps>
      </>
    );
  };

БЛОГ НА HUSL

Обновление точек на React Яндекс карте

Ответы (1 шт):