从 API 加载 geoJSON 标记 - React Leaflet

Question

传单和使用 GeoJSON。一旦数据存储在状态中，我正在尝试从获取的 GeoJSON API 中获取标记以在地图上呈现。我尝试使用标记组件来显示 API 中的标记，但没有任何内容呈现到页面。我愿意使用标记组件或任何其他方式来显示标记。谢谢！

import React, { Component } from "react";
import "./App.css";
import { Map, TileLayer, Marker, Popup, GeoJSON } from "react-leaflet";
import L from "leaflet";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      location: {
        lat: 51.505,
        lng: -0.09
      },
      zoom: 2,
      bikes: null,
      haveUsersLocation: false,
    };

 componentWillMount() {
    fetch(
      "https://bikewise.org:443/api/v2/locations/markers?proximity_square=10"
    )
      .then(response => response.json())
      .then(data => this.setState({ bikes: data }));
  }

 render() {
    const position = [this.state.location.lat, this.state.location.lng];

    return (
      <div className="App">
        <Menu />
        <Map className="map" center={position} zoom={this.state.zoom}>
          <TileLayer
            attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />

          <GeoJSON addData={this.state.bikes} /> 

          {this.state.haveUsersLocation ? (
            <Marker position={position} icon={myIcon}>
              <Popup>Your current location</Popup>
            </Marker>
          ) : (
            ""
          )}
        </Map>
      </div>
    );
  }
}

Answer 1

标记组件永远不会被调用的原因是，this.state.haveUsersLocation 始终为 false，并且您没有在组件中的任何位置将其设置为 true。如果您只想在 haveUsersLocation 为 true 时渲染 Marker 组件，则需要将 haveUsersLocation 更改为 true 以渲染 Marker 否则删除条件

您需要在componentWillMount中将haveUsersLocation设为true，Marker才会成功渲染

componentWillMount() {
    fetch(
      "https://bikewise.org:443/api/v2/locations/markers?proximity_square=10"
    )
      .then(response => response.json())
      .then(response => this.setState({ haveUsersLocation: true, bikes: response.data.features }));
  }

要强制响应重新渲染 GeoJSON 数据，您需要将一些 data-uniq 键传递给组件。查看下面的github问题了解更多详情

   <GeoJSON key={`geojson-01`} addData={this.state.bikes} /> 

https://github.com/PaulLeCam/react-leaflet/issues/332#issuecomment-304228071

还需要为 Marker 添加唯一键

   {this.state.haveUsersLocation ? (
        <Marker key={`marker-01`} position={position} icon={myIcon}>
          <Popup>Your current location</Popup>
        </Marker>
      ) :  ""}