Question

我正在学习将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成为显示和缩放地图的目标区域。那是什么都不起作用的地方。我无法根据新值使用动画调整视图的大小。我该如何工作？谢谢

在商店中更改状态后，Mapbox-GL组件不会更新

0 个答案: