Wie erhält man den richtigen React-Schlüssel für die Markerkomponente?

Question

Wenn react-leaflet verwendet und z. mehrere Markierungskomponenten aus dem Array von latlons, endet ein oben mit z.B .:

latlons.map((lat, lon, i) => <Marker key={i} position={L.latLng(lat, lon)} /> 

jedoch die key={i} keine gute Praxis ist, wie here erläutert.

Es scheint nicht reagieren-Prospekt bietet Tools, um einige eindeutige Schlüssel für eine Komponente zu generieren. In einigen Fällen kann man key={lat.toString() + lon.toString()} verwenden, aber dieser Ansatz wird nicht funktionieren, wenn der Marker ziehbar sein sollte.

Answer 1

Machen Sie einfach eine einzigartige Zeichenfolge Ihrer Wahl. Wenn Sie Ihre Markierungen in einer Datenbank speichern, wäre es eine gute Option, eine Zeichenfolge zu erstellen, die den Primärschlüsselwert Ihres Markers enthält. Wenn Sie etwas spontan generieren müssen, können Sie das Paket uuid verwenden, um eine eindeutige ID zu generieren.