Получение обратного вызова API за пределами функции в ReactJS

Question

Я не могу получить данные, чтобы пройти мимо строки 72 (я отмечен линией прерывания). До этого момента все проходит отлично (данные из базы данных переходят на объект «google-geocoder» и «geoPlace», проходящий через Callback в параметре «data», но когда я пытаюсь получить доступ к «данным» за пределами функции «геокодер», Data "становится неопределенным. Я пробовал .bind, setState, window. И т. Д. Все без везения. Я чувствую, что это проблема с областью, но не уверен. Любая помощь будет очень благодарна. Спасибо.

// Feed 
//  Tools 
//  Listing 
//  Location 
//   FeedMap 
//   MapLoader 

import React from 'react'; 
import geocoder from 'google-geocoder'; 
import FeedMap from './feedMap.js'; 

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(){ 
    console.log(this.state.petTrip, 'I am the console log from line  28'); 
    return (
     <div> 
      <AllpetTrip petTrip={this.state.petTrip}/> 
     </div> 
    ) 
    } 

}); 


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

    return (
     <div> 
     { trips } 
     </div> 
    ) 
    } 
}); 




var Geolocator = React.createClass({ 
    render: function(){ 
    var geo = geocoder ({ 
    key: 'AIzaSyC9Zst0uBpxGJ2P4LLv3IMATpN9Ppl4ImI' 
     }); 
     geo.find(this.props.start, function(err, data){ 
     console.log(data, "this is the GeoPlace object") 
     }); 

---

 return(
     <div> 
     <FeedMap geolocations = { data }/> 
     </div> 
    ) 
    } 

}); 


module.exports = Location; 

Answer 1

это потому, что вы пытаетесь получить доступ к свойствам компонента, прежде чем принимать их.

var AllpetTrip = React.createClass({ 
    componentWillReceiveProps(props){ 
    this.setState({ 
    petTrip: props.petTrip 
    }) 
    }, 
    getInitialState(){ 
    return({ 
    petTrip: [] 
    }) 
    }, 
    render: function(){ 
     // console.log(this.props.petTrip, "at map") 
    var trips = this.state.petTrip.map(function(item){ 
     return <Geolocator start={item.startPoint}/> 
    }); 

    return (
     <div> 
     { trips } 
     </div> 
    ) 
    } 
}); 

или использовать условие на код:

var AllpetTrip = React.createClass({ 
    render: function(){ 
     // console.log(this.props.petTrip, "at map") 
    var trips = this.props.petTrip.length ? this.props.petTrip.map(function(item){ 
     return <Geolocator start={item.startPoint}/> 
    }) : null 

    return (
     <div> 
     { trips } 
     </div> 
    ) 
    } 
}); 

Я надеюсь, что это помогает.