diff --git a/src/components/fields/_ZoomProperty.jsx b/src/components/fields/_ZoomProperty.jsx index 2d6baac..6007cae 100644 --- a/src/components/fields/_ZoomProperty.jsx +++ b/src/components/fields/_ZoomProperty.jsx @@ -62,18 +62,23 @@ export default class ZoomProperty extends React.Component { } componentDidMount() { - this.setState({ - refs: setStopRefs(this.props, this.state) - }) + const newRefs = setStopRefs(this.props, this.state); + + if(newRefs) { + this.setState({ + refs: newRefs + }) + } } - static getDerivedStateFromProps(nextProps) { + static getDerivedStateFromProps(props, state) { const newRefs = setStopRefs(props, state); if(newRefs) { return { refs: newRefs }; } + return null; } // Order the stops altering the refs to reflect their new position. diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 18f3e95..1858e46 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -81,21 +81,23 @@ export default class MapboxGlMap extends React.Component { } } - UNSAFE_componentWillReceiveProps(nextProps) { + updateMapFromProps(props) { if(!this.state.map) return - const metadata = nextProps.mapStyle.metadata || {} + const metadata = props.mapStyle.metadata || {} MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox - if(!nextProps.inspectModeEnabled) { + if(!props.inspectModeEnabled) { //Mapbox GL now does diffing natively so we don't need to calculate //the necessary operations ourselves! - this.state.map.setStyle(nextProps.mapStyle, { diff: true}) + this.state.map.setStyle(props.mapStyle, { diff: true}) } } componentDidUpdate(prevProps) { const map = this.state.map; + this.updateMapFromProps(this.props); + if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) { this.state.inspect.toggleInspector() }