React JS Google地图标记仅在刷新后显示

Question

感谢您阅读此内容。 我正在将数据从AJAX调用中拖动到地理编码器，然后再通过Google地图放置标记。地图加载正常，数据传递到标记，但只有当我刷新页面。我一直在尝试使用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;