Реагируйте на проблему повторного рендеринга карт Google с помощью onBoundsChanged - PullRequest
Новая
       24

Реагируйте на проблему повторного рендеринга карт Google с помощью onBoundsChanged

0 голосов
/ 06 февраля 2019

У меня есть проект, над которым я работаю, где я использую реагирующие карты Google, однако я столкнулся с проблемой, когда, когда я получаю событие onBoundsChanged и устанавливаю состояние в обратном вызове, он переходит в постоянныйцикл рендеринга.Я могу только предположить, что, когда компонент повторно рендерится после того, как я вызову setState, он устанавливает новые границы, и это затем повторно вызовет обратный вызов и setState снова в форме бесконечно рекурсивного цикла. 

import React from 'react'
import { compose, withProps, withStateHandlers, withState, withHandlers } from "recompose";
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker
} from"react-google-maps";
import HouseDetails from './house/HouseDetails'
const { InfoBox } = require("react-google-maps/lib/components/addons/InfoBox");

class Map extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      zoom: 15,
      bounds: null    
    }
    this.map = React.createRef()
    this.onBoundsChanged = this.onBoundsChanged.bind(this)
    this.onZoomChanged = this.onBoundsChanged.bind(this)
  }
  componentWillReceiveProps(test){
  }
  onBoundsChanged(){
    this.setState({bounds: this.map.current.getBounds()}, ()=> console.log('update'))
    let bounds = this.map.current.getBounds()
    let realBounds = {lat:{west: bounds.ga.j, east: bounds.ga.l}, lon: {north: bounds.ma.j, south: bounds.ma.l}}
    console.log(realBounds) 

  }
  onZoomChanged(){
    this.setState({zoom: this.map.current.getZoom()})
  }
  componentDidUpdate(){
    console.log('hm')
  }
  render(){
    return (
    <GoogleMap
        defaultZoom={15}
        ref={this.map}
        onZoomChanged={this.onZoomChanged}
        onBoundsChanged={this.onBoundsChanged}
        center={{ lat: 21.493468, lng: -3.177552}}
        defaultCenter={this.props.center}>
    </GoogleMap>
    )
  }
}

export default withScriptjs(withGoogleMap(Map))

Код для компонента, который выполняет рендеринг в бесконечность, приведен выше, он не выдает ошибку, пока я не setState в функции onBoundsChanged.Есть ли способ обойти это?

1 Ответ

0 голосов
/ 07 февраля 2019

Я преобразовал приведенный выше класс из примеров составления документов, я, должно быть, где-то облажался, потому что моя ошибка была очень очевидной, так как при рендеринге центр был установлен для объекта GoogleMap, все, что мне нужно было сделать, это иметь начальное состояние сместоположение, установите состояние по умолчанию и затем удалите «центральную» опору из компонента, это означает, что при повторном рендеринге он не тянет его назад к центру, и, следовательно, не вызывает повторного запуска onBoundsChanged

...