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;