React-листовка: как обновить позиции маркера?

Question

Я не могу понять, как правильно обновлять свои маркеры, используя ответную листовку. Используя этот пример:

import React from 'react';
import { render } from 'react-dom';
import { connect } from 'react-redux';
import { Map, Marker, TileLayer } from 'react-leaflet';

const map = props => (
  <Map center={[51.505, -0.09]} zoom={13}>
    <TileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    />
    {props.markers.map(m => (
      <Marker position={m.position} />
    ))}
  </Map>
);

const mapStateToProps = state => ({
  markers: state.markers // array of objects with positions. this can change
});

render(connect(mapStateToProps)(map), document.getElementById('map-container'));

Это работает, но я не знаю, правильно ли это сделать. Потому что в том случае, когда маркеры обновляют свою позицию (или имеется больше маркеров), Leaflet удалит маркеры и установит новые вместо обновления позиции оригинальных маркеров.

Так что мой вопрос таков. Я делаю это правильно или это не самый эффективный способ?

Спасибо!

Answer 1

Я правильно делаю?

Да, вы. Вы должны использовать его таким образом.

это не самый эффективный способ

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

Вы можете исправить это, используя ключи при отображении ваших данных. Подробнее об этом здесь

Другим способом было бы рассчитать ваши addedMarkers, removedMarkers и updatedMarkers отдельно и использовать их для повторной визуализации вашего представления. Это, однако, может оказаться большой проблемой, если в вашем приложении будет использоваться меньшее количество маркеров.