React-leaflet：如何更新标记位置？

Question

我无法理解如何使用 react-leaflet 正确更新我的标记。使用这个例子：

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

我做得对吗？

是的，你是。你应该这样使用它。

这不是最高效的方式

你也在那里。这不是最高效的方式。这是因为一旦 props 发生变化，就会强制重新渲染 react 组件。这将包括移除存在的标记和添加所有新标记。这是因为 React 不会知道什么是来自之前的 props 以及什么是新的东西。

您可以通过在映射数据时使用键来解决这个问题。在此处阅读更多相关信息

另一种方法是计算你的addedMarkers，removedMarkers并updatedMarkers分别用它们来重新渲染你的看法。但是，如果您的应用程序要使用的标记数量相当少，这可能会成为一个大麻烦。