javascript - 使用 onBoundsChanged react 谷歌地图重新渲染问题

Question

我正在开发一个项目，其中使用 React google map ，但是我遇到了一个问题，当我获取 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))

上面是重新渲染到无穷大的组件的代码，只要我不在 onBoundsChanged 函数中 setState ，它就不会出错。有什么办法可以解决这个问题吗？

Answer 1

我正在使用react-google-maps。

如果你想在拖动 map 时更新新位置上的标记，可以使用 onBoundsChanged 属性

<GoogleMap
        ref={refMap}
        defaultZoom={13}
        defaultCenter={{ lat: center.lat, lng: center.lng }}
        onBoundsChanged={handleBoundsChanged}
        fullscreenControl={false}
        defaultOptions={defaultMapOptions}
        onDragEnd={handleDragend}
      >
        <Marker position={center} />
      </GoogleMap>

在你的handleBoundsChanged中，你可以用新的纬度/经度更新中心

const handleBoundsChanged = () => {
    console.log("handleBoundsChanged")
    const lat = refMap.current.getCenter().lat()
    const lng = refMap.current.getCenter().lng()
    const mapCenter = {
      lat: lat,
      lng: lng,
    }
    setCenter(mapCenter); // move the marker to new location
  };

如果您想以编程方式将 map 移动到新的纬度/经度，您可以在地址更新时使用 useEffect 中的 panTo 函数。当您在搜索中输入地址并且希望 map 和标记位于新位置时，需要执行此操作

//on address update
  useEffect(() =>{
    console.log("props updates", props.address, props.locationName)
    if(props.address.source == 'searchbar'){
      console.log("in the searchbar props")
      const mapCenter = {
        lat: props.address.latitude,
        lng: props.address.longitude,
      }
      refMap.current.panTo(mapCenter) //move the map to new location
      setCenter(mapCenter) // move the marker to new location
    }
  },[props.address])