Невозможно обновить во время существующего перехода между состояниями в google-map-реагировать - PullRequest
Новая
       21

Невозможно обновить во время существующего перехода между состояниями в google-map-реагировать

0 голосов
/ 17 апреля 2019

Итак, у меня есть эта карта на моей странице, которую я отображаю, используя удивительную библиотеку google-map-реаги * .Я хочу обновить некоторые состояния в избыточном, когда клиент применяет некоторые фильтры к карте: 

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import CurrentLocationMarker from './CurrentLocationMarker';
import {connect} from 'react-redux';
import { setZoom, setMapCenter } from '../../redux/actions';

class MapBlock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentLocationGiven: false,
      currentLocationPos: this.props.center,
      GmapAPILoaded: false
    };
  }

  componentDidMount() {
    this.renderCurrentLocation();
  }

  setDurationRadius = (map, maps, durationFilter) => {
    this.renderCircle(map, maps);
    this.props.setMapCenter(this.state.currentLocationPos);
    switch (durationFilter) {
      case 2:
        this.props.setZoom(16);
        break;
      case 5:
        this.props.setZoom(16);
        break;
      case 10:
        this.props.setZoom(15);
        break;
      default:
        this.props.setZoom(13);
        break;
    }

  }

  renderCircle = (map, maps) => {
    this.TKMcircle = new maps.Circle({
      // draw google map circle
    })
    }

  renderCurrentLocation = () => {
    // gets user current location

}
  render() {
    return (

        <div className="" style={{ ... }}>
          <GoogleMapReact
            bootstrapURLKeys={{ key: process.env.GOOGLE_API_KEY }}
            center={this.props.center}
            zoom={this.props.zoom}
            onClick={this.handleClickOutside}
            onChange={mapInfo => {this.props.filterMeals(undefined , mapInfo.bounds)}}
            onGoogleApiLoaded={({map, maps}) => {
               this.TKMmap = map;
               this.TKMmaps = maps;
               this.setState({GmapAPILoaded: true});
              }
            }
            yesIWantToUseGoogleMapApiInternals={true}
            >
            {
              this.props.durationFilter.length !== 0 ? (
              this.TKMcircle && this.TKMcircle.setMap(null),
              this.setDurationRadius(this.TKMmap, this.TKMmaps, this.props.durationFilter)
            ) : (
              this.TKMcircle && this.props.setZoom(13),
              this.TKMcircle && this.TKMcircle.setMap(null)
            )
          }
          </GoogleMapReact>
        </div>
    );
  }
}

const mapDispatchToProps = { setZoom, setMapCenter }

const mapStateToProps = state => ({
  center: state.user.mapCenter,
  zoom: state.user.zoom,
  durationFilter: state.meals.durationFilter
})

Проблема возникает с setDurationRadius(): при ее запуске в этой строке появляется следующая ошибка (т.е.первая строка в методе, который обновляет мое состояние в приставке) this.props.setMapCenter(this.state.currentLocationPos);.

Warning: Cannot update during an existing state transition (such as within 'render'). Render methods should be a pure function of props and state.

Как я могу решить эту проблему, чтобы мой метод setDurationRadius() работал?

EDIT: удален бесполезный код для упрощения

...