componentDidUpdate prevProps给了我当前/新的道具

时间:2016-09-08 23:27:48

标签: reactjs leaflet

我试图整合传单地图,但我认为这不是问题所在。无论如何重新渲染我的地图我想使用componentDidUpdate来查看道具是否已更改我从父组件传递到我的地图组件。但是现在出现问题,每当我尝试console.log(prevProps.xx, this.props.xx)它们完全相同时,即使我刚刚更新它,所以我无法真正使用componentDidUpdate,还有其他方法吗? componentWillReceiveProps也不起作用,当我在父组件处更新我的状态并将其传递给我的地图组件时,它总是以1:1相同,因此无法比较事物。

这是我的代码:

var Map = React.createClass({

map: null,
tileLayer : null,

componentDidMount: function() {
   // code to run just after the component "mounts" / DOM elements are created
   // make the AJAX request for the GeoJSON data
   // create the Leaflet map object
   if (!this.map) this.init('mapid');
 },
 componentWillReceiveProps: function(nextProps) {
   console.log(nextProps.labels, this.props.labels);
 },
 componentDidUpdate(prevProps, prevState) {
   const zoom = this.props.labels.zoom;
   const mapstyle = this.props.labels.mapstyle;
   const latlng = [this.props.labels.lat, this.props.labels.lng];
   this.map.setView(latlng);
   this.tileLayer.setUrl(mapstyle);
   console.log(prevProps.labels, this.props.labels);
  },

 init: function(id) {
  const zoom = this.props.labels.zoom;
  const mapstyle = this.props.labels.mapstyle;
  const latlng = [this.props.labels.lat, this.props.labels.lng];
  if (this.map) return;
  // this function creates the Leaflet map object and is called after the Map component mounts
  this.map = L.map(id).setView(latlng,zoom);


  // a TileLayer is used as the "basemap"
  this.tileLayer = L.tileLayer(mapstyle).addTo(this.map);

  // set our state to include the tile layer
  },
  render: function(){
    return(
      <div></div>
    )
  },

  });

1 个答案:

答案 0 :(得分:-1)

  1. 创建一个新的状态元素,例如response
  2. 将道具分配给response
  3. 尝试在render()内编写函数