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

我做对了吗？

是的，你是。您应该以这种方式使用它。

这不是最有效的方法

您也在那里。 这不是最有效的方法。这是因为一旦道具改变，它将迫使反应成分重新呈现。这将包括删除存在的标记并添加所有新标记。这是因为React对以前的道具是什么以及新的东西一无所知。

您可以在映射数据时使用keys来解决此问题。进一步了解here

另一种方法是分别计算addedMarkers，removedMarkers和updatedMarkers，然后使用它们重新渲染视图。但是，如果您的应用要使用的标记数量相对较少，那么可能会很麻烦。