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;