让API回调在ReactJS函数外部传递

Question

我无法让数据通过第72行(我用断线标记)。到目前为止，一切都是伟大的(数据库中的数据正在传递给“GoogleGeo编码器”，而"geoPlace“对象则是通过”数据“param中的回调来实现的，但是当我试图访问”Geo编码器“函数"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>
    )
   }
 });

我希望这能帮到你。