Question

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

我希望这会有所帮助。

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

1 个答案: