React-mapbox-gl: Event handlers not being updated on prop changes

Created on 13 Nov 2017 · 4Comments · Source: alex3165/react-mapbox-gl

Event handlers appear to only be added when the map is created, in componentDidMount. When the property changes to either add or remove them from the react-mapbox-gl component, those changes are not reflected in the map.

Here's a simple example showcasing two scenarios where you can see the issue:

state = {
  trackMovements: false,
  loadedData: false,
};

// this should only get called once, but instead gets called repeatedly
// as the source data is loaded (e.g. while the map is zoomed in or moved around)
getData = (map, { sourceId }) => {
  this.setState({ loadedData: true, sourceId });
};

// once the button is clicked, this should get called every time the map moves,
// but instead will never get called.
onMove = (map) => {
  console.log(map.getCenter());
};

render() {
  <button onClick={() => this.setState({ trackMovements: true })}>Track movements</button>
  <Map
    onMove={this.state.trackMovements && this.onMove}
    onSourceData={!this.state.loadedData && this.getData}
  />
}

Bug

Source

redbmk

All 4 comments

Indeed, this need to be added, although as a work around for now you could do:

state = {
  trackMovements: false,
  loadedData: false,
};

// this should only get called once, but instead gets called repeatedly
// as the source data is loaded (e.g. while the map is zoomed in or moved around)
getData = (map, { sourceId }) => {
  if (this.state.loadedData) { return; }
  this.setState({ loadedData: true, sourceId });
};

// once the button is clicked, this should get called every time the map moves,
// but instead will never get called.
onMove = (map) => {
  if (!this.state.trackMovements) { return; }
  console.log(map.getCenter());
};

render() {
  <button onClick={() => this.setState({ trackMovements: true })}>Track movements</button>
  <Map
    onMove={this.onMove}
    onSourceData={this.getData}
  />
}