Question

感谢您关注此事。我将数据从AJAX调用拉到地理编码器，然后谷歌地图放置标记。地图加载正常，数据传递给标记，但仅在我刷新页面时。我一直在尝试设置一个setTimeout函数，但我很难确定在哪里放置它并且不确定这是否是解决问题的最佳方法。

再次感谢您的帮助。

   var Location = React.createClass({
    getInitialState: function(){
    return {
     petTrip: []
     }
     },

    getAllpetTripFromServer: function(){
     var self = this;
     $.ajax({
     method: 'GET',
     url: '/travel'
     }).done(function(data){
     console.log(data, "I am the data from line 17");
     self.setState({ petTrip: data })
     })
    },

   componentDidMount: function(){
   this.getAllpetTripFromServer();
  },

  render: function(){
   return (
    <div>
     <AllpetTrip petTrip={this.state.petTrip}/>
    </div>
   )
  }
 });

 var AllpetTrip = React.createClass({
  render: function(){
    var trips = this.props.petTrip.map(function(item){
    return <Geolocator start={item.startPoint}/>
   });
   return (
    <div>
      { trips }
    </div>
   )
  }
});

 var Geolocator = React.createClass({
  getInitialState: function(){
  return {
    location: []
   }
 },
  allLocations: [],
  getLocations: function(){
  var self = this;
  var key = { key: 'AIzaSyC9Zst0uBpxGJ2P4LLv3IMATpN9Ppl4ImI'};
  var coder = geocoder(key);
  var arr = [];
  var geo = coder.find(this.props.start, function(err, data){
    self.allLocations.push(data[0]);
  })
  },

 componentDidMount: function(){
   this.getLocations();
 },

  render: function(){
  var startPoints = this.allLocations ?      this.allLocations.map(function(item){
    return <Marker position={
      { lat: item.location.lat, lng: item.location.lng}
    } icon={'img/marker.png'}/>
    }) : null;


  return (
    <div id="google-map">
      <MapLoader>
      <GoogleMap
       defaultZoom={4}
       center={{lat: 40., lng: -99.000}}>
      >

        { startPoints }

    </GoogleMap>
    </MapLoader>
    </div>

    )
   }
 });

 module.exports = Location;

Answer 1

维护self.allLocations.push（data [0]）;在该州

您的allLocations对渲染功能至关重要，应处于状态

var Geolocator = React.createClass({
  getInitialState: function(){
  return {
    location: [],
    allLocations: []
   }
 },
  allLocations: [],
  getLocations: function(){
  var self = this;
  var key = { key: 'AIzaSyC9Zst0uBpxGJ2P4LLv3IMATpN9Ppl4ImI'};
  var coder = geocoder(key);
  var arr = [];
  var allLocations =[];
  var geo = coder.find(this.props.start, function(err, data){
    allLocations.push(data[0]);
   this.setState({
        allLocations: allLocations
   })

  }.bind(this)
  },

 componentDidMount: function(){
   this.getLocations();
 },

  render: function(){
  var startPoints = this.allLocations ?      this.state.allLocations.map(function(item){
    return <Marker position={
      { lat: item.location.lat, lng: item.location.lng}
    } icon={'img/marker.png'}/>
    }) : null;


  return (
    <div id="google-map">
      <MapLoader>
      <GoogleMap
       defaultZoom={4}
       center={{lat: 40., lng: -99.000}}>
      >

        { startPoints }

    </GoogleMap>
    </MapLoader>
    </div>

    )
   }
 });

 module.exports = Location;

React JS Google Map Markers仅在刷新后显示

1 个答案: