获取 API 回调以在 ReactJS 中的函数之外传递

Question

我无法让数据通过第 72 行（我用断线标记）。到目前为止，一切都很好（来自数据库的数据正在传递给“google-geocoder”，并且“geoPlace”对象正在通过“数据”参数中的回调但是当我尝试访问“地理编码器”功能之外的“数据”时“数据”变得未定义。 我尝试过 .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>
    )
   }
 });

我希望这会有所帮助。