Question

我在React / Redux应用中有一个Google地图组件。单击列表中的项目时，它会向下传递一个坐标数组，以便从用户的当前位置呈现为方向。通过react-redux mapStateToProps传递道具。我正在调用一个函数来生成折线，这就是我的问题所在。在渲染内部生成标记很好，但是在单击另一个条目之前不会渲染方向。基本上它总是落后于当前标记的一步。因此，对于2站，我将从当前位置到停止1，但不停止2的方向。对于3站，将生成停止1到停止2的当前位置，但不会停止3.

当我退出渲染内部数组的长度时，我得到预期的数量，1个停止的长度为1。我已经尝试将方法放在componentWillWillReceiveProps和componentWillUpdate中，两种方法都会记录0表示停止。

如果相关，这是组件：

const GoogleMapComponent = React.createClass({
  mixin: [PureRenderMixin],

  getInitialState: function() {
    return {
      map: null,
      maps: null,
      color: 0
    }
  },

  componentWillUpdate: function() {
    console.log('LOGS ZERO HERE', this.props.tourList.length)
    if (this.state.maps) {
      this.calculateAndDisplayRoute(this.state.directionsService,     this.state.directionsDisplay, this.props.tourList);
    }
  },

  saveMapReferences: function(map, maps) {
    let directionsDisplay = new maps.DirectionsRenderer({map, polylineOptions: {strokeColor: '#76FF03'}, suppressMarkers: true});
    let directionsService = new maps.DirectionsService();

    this.setState({ map, maps, directionsService, directionsDisplay });
  },

  generateWaypoints: function(coords) {
    return coords.map((coord) => { 
      return { location: new this.state.maps.LatLng(coord.lat, coord.lng) };
    });
  },

  calculateAndDisplayRoute: function(directionsService, directionsDisplay, tourStops) {
    let origin = this.props.userLocation || { lat: 37.77, lng: -122.447 };
    let destination = tourStops[tourStops.length - 1];
    let directions = { origin, destination, travelMode:     this.state.maps.TravelMode.DRIVING };
    if (this.props.tourList.length > 1) {
      directions.waypoints = this.generateWaypoints(tourStops);
    }

    if (tourStops.length > 0) {
      directionsService.route(directions, (response, status) => {
        if (status === this.state.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        } else {
          console.log('Directions request failed due to ' + status);
        }
      });
    } else {
      directionsDisplay.set('directions', null);
    }
  },

  render: function() {
    console.log('LOGS 1 HERE', this.props.tourList.length)
    let markers = this.props.tourList.map((marker, idx) => {
      let loc = marker.prevLoc ? marker.prevLoc : 'your current location.';
      return <Marker className='point' key={idx} image={marker.poster} lat={marker.lat} lng={marker.lng} location={marker.location} price={marker.price} loc={loc} /> 
    });
    let defaultCenter = {lat: 37.762, lng: -122.4394};
    let defaultZoom = 12

    if (this.props.userLocation !== null) {
      return (
        <div className='map'>
          <GoogleMap defaultCenter={defaultCenter} defaultZoom={defaultZoom} yesIWantToUseGoogleMapApiInternals={true} 
                     onGoogleApiLoaded={({map, maps}) => {
                        map.setOptions({styles: mapStyles});
                        this.saveMapReferences(map, maps);
                      }} >
            {markers}
          <UserMarker lat={this.props.userLocation.lat} lng=    {this.props.userLocation.lng} />
          </GoogleMap>
        </div>
      );
    }

    return (
      <div className='map'>
        <GoogleMap defaultCenter={defaultCenter} defaultZoom={defaultZoom}              yesIWantToUseGoogleMapApiInternals={true} 
                   onGoogleApiLoaded={({map, maps}) => {
                      map.setOptions({styles: mapStyles});
                      this.saveMapReferences(map, maps);
                    }} >
          {markers}
        </GoogleMap>
      </div>
    );
  }
});

function mapStateToProps(state) {
  return {
    tourList: state.sidebar.tourList,
    userLocation: state.home.userLocation
  }
}

export default connect(mapStateToProps)(GoogleMapComponent);

Answer 1

想出来，我没有将nextProps传递给componentWillUpdate，因此总是使用旧道具调用该函数。

Answer 2

function get_page($seo_url){ $this -> db -> select('page_title,page_content'); $this -> db -> from('pages'); $this -> db -> where('seo_url', $seo_url); $page = $this -> db -> get(); $res = $page->result_array(); OR $res = $page->result(); return ($res)? $res:false; }被称为之前到componentWillUpdate正在更新。按如下方式更改this.props：

componentWillUpdate

ReactJS在同一组件中以不同的速度进行道具更新

2 个答案: