Компонент Mapbox-GL не обновляется после изменения состояния в магазине - PullRequest
Новая
       42

Компонент Mapbox-GL не обновляется после изменения состояния в магазине

0 голосов
/ 09 июля 2019

Я учусь использовать mapbox с react.js. Для моего маленького проекта я установил actions, который обновил мои координаты. Я могу зарегистрировать новое state, которое я получаю как props через mapStateToProps, но когда я пытаюсь обновить существующее состояние, оно не работает и выдает ошибки.

Вот мой код: 

import ReactMapGL, { FlyToInterpolator } from "react-map-gl";
import React, { Component } from "react";
import "mapbox-gl/dist/mapbox-gl.css";

//redux side
import { connect } from 'react-redux';




const MAPBOX_TOKEN =
  "pk.mysecretkey";

const mapStyle = "mapbox://styles/jlmbaka/cjvf1uy761fo41fp8ksoil15x";

const INITIAL_STATE = {
      height: "100vh",
      width: "100%",
      longitude: 23.071374,
      latitude: -3.6116245,
      zoom: 1.33
  };

const DRC_MAP = {
    longitude: 23.656,
    latitude: -2.88,
    zoom: 4.3,
    curve: 1,
    speed: 0.7,
    easing: t => t * (2 - t)
  }

let count=0;
class Map extends Component{
  state = {
        viewport:INITIAL_STATE,
        country:DRC_MAP
    };


    _goToViewport = args => {
      // console.log("goToViewport() : ", this.state.viewport);
      this._handleViewportChange({
        zoom: 0,
        transitionInterpolator: new FlyToInterpolator(),
        transitionDuration: 3000,
        ...args
      });
    };

    _flyToDRC = () => {
      setTimeout(() => {
        this._goToViewport(
          this.state.country
        );
      }, 1000);
    };

    _flyToInfrastructure = ()=>{}

    _handleLoad = () => this._flyToDRC();

    _handleViewportChange = viewport => this.setState({viewport});

     componentWillMount(){
       console.log("componentWillMount() - "+count);
     }

    render(){
      // count += 1;
      // console.log("render() - "+count);
      if(this.props.energy!==null){
        const latitude=this.props.energy[0].geometry.coordinates[0];
        const longitude = this.props.energy[0].geometry.coordinates[0];
        this.setState({viewport:this.state.country});
        this.setState({country:{...this.state.country,latitude,longitude}},()=>console.log(this.state.country));
      }else{
        console.log(this.state.country);
      }

      return (
        <ReactMapGL
          mapboxApiAccessToken={MAPBOX_TOKEN}
          mapStyle={mapStyle}
          onViewportChange={this._handleViewportChange}
          onLoad={this._handleLoad}
          {...this.state.viewport}
        />
      );
    };
}


const mapStateToProps = (state) => {
  const { energy, road } = state;
  return {
    energy:energy
    // road
  }
}

export default connect(mapStateToProps,null)(Map);

В приведенном выше коде INITIAL_STATE const имеет значения, которые определяют, как будет изначально отображаться моя карта. DRC_MAP const - это то, как моя карта будет отображаться после animated zoom. Я использовал эти 2 const для инициализации моих объектов состояния viewport и country.

При этом все работает нормально и как положено. Но в моем методе render я проверяю, есть ли новое значение для моего состояния, например: if(this.props.energy!==null){...}

Я пытался, чтобы увеличенная версия или фактическая карта стала начальной viewport, а new values стала целевой областью для отображения и увеличения карты. Вот где ничего не работает. Я не могу определить размер с анимацией на основе новых значений. Как я могу сделать эту работу? Спасибо

...