Javascript 从API-React传单加载geoJSON标记

传单和使用GeoJSON。我正在尝试从一个获取的GeoJSON API中获取标记，以便在数据存储到状态后在地图上呈现。我已经尝试使用marker组件来显示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>
    );
  }
}

import React，{Component}来自“React”；
导入“/App.css”；
从“react传单”导入{Map，tillelayer，Marker，Popup，GeoJSON}；
从“传单”中输入L；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
地点：{
拉脱维亚：51.505，
液化天然气：-0.09
},
缩放：2，
自行车：空，
haveUsersLocation:false，
};
组件willmount（）{
取回(
"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]；
返回(
{this.state.haveUsersLocation(
您的当前位置
) : (
""
)}
);
}
}

原因标记组件从未被调用，因为

此.state.haveUsersLocation

始终为false，并且您没有在组件中的任何位置将其设置为true。如果您只想在

haveUsersLocation

为true时渲染标记组件，则需要将

haveUsersLocation

更改为true以渲染标记呃,否则就取消这个条件

您需要在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 }));
  }

要强制react重新呈现GeoJSON数据，您需要向组件传递一些数据uniq密钥。有关更多详细信息，请查看下面的github问题

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

此外，还需要为标记添加一个唯一的键

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

{this.state.haveUsersLocation(
您的当前位置
) :  ""}

三元运算符更新haveUsersLocation状态，我创建的初始标记显示得很好，但我无法显示API中的标记。@Shawn我已经更新了我的答案，请立即重试您需要将response.data.features设置为bikes@Think-两次，或者，不改变响应，只改变GeoJSON标签？

@AussieJoe yeah同意这也是有效的