google-maps - React-google-maps 重新渲染问题

Question

我在使用 react-google-maps npm 模块时遇到一些问题。

第一次渲染，效果非常好。重新渲染 map 组件时，我收到经典的谷歌地图错误。

Uncaught TypeError: Cannot read property 'offsetWidth' of null
Uncaught (in promise) TypeError: Cannot read property 'componentWillReceiveProps' of null(…)

因为渲染时 map 对象不可用？

My google-maps Map Component

import React, { PropTypes } from 'react'
import { GoogleMap, Marker, GoogleMapLoader } from 'react-google-maps'
export class Map extends React.Component {
  static propTypes = {
    coordinates: PropTypes.object,
    markers: PropTypes.array
  };

  render () {
    return (<section onloadstyle={{height: '300px'}}>
      <GoogleMapLoader
        containerElement={
          <div
            {...this.props}
            style={{
              height: '300px',
              width: '100%'
            }}
          />
        }
        googleMapElement={
          <GoogleMap
            ref={(map) => console.log(map)}
            defaultZoom={15}
            defaultCenter={this.props.coordinates}>
            {this.props.markers.map((marker, index) => {
              return (
                <Marker key={index} {...marker} />
              )
            })}
          </GoogleMap>
        }
      />
    </section>)
  }
}

export default Map

我使用这样的组件:

var coordinates = {lat: this.props.item.delivery_address_lat, lng: this.props.item.delivery_address_lng}
var map = this.props.item.delivery_address_lat !== 0 && this.props.item.delivery_address_lng !== 0 ? (<Row id='map'>
      <Map markers={[{position: coordinates}]} coordinates={coordinates} />
</Row>) : ''

这是因为 google-maps-react 模块没有正确卸载组件还是我已经做了什么？

以下是头部内容

<script src="https://maps.googleapis.com/maps/api/js?key=MY-KEY"></script>

EDIT

尝试以非react-redux方式解决它，但这绝不是一个解决方案，因为它会产生错误消息:只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 setState()。这是一个禁止操作。请检查Map组件的代码。

但是， map 仍然可以正确重新渲染。我尝试以调用传递的 prop 函数和状态的 redux 方式执行此操作，并在状态中设置 {map:section}，将其从调用 View 传递下来。没有解决任何问题并导致相同的错误消息，即使它被 setTimeout

延迟了

我有点卡在这里，不知道如何解决这个问题。

componentDidMount () {
    this.setState({map: null})
    setTimeout(() => this.setState({
      map: <section onloadstyle={{height: '300px'}}>
      <GoogleMapLoader
        containerElement={
          <div
            {...this.props}
            style={{
              height: '300px',
              width: '100%'
            }}
          />
        }
        googleMapElement={
          <GoogleMap
            ref={(map) => console.log(map)}
            defaultZoom={15}
            defaultCenter={this.props.coordinates}>
            {this.props.markers.map((marker, index) => {
              return (
                <Marker key={index} {...marker} />
              )
            })}
          </GoogleMap>
        }
      />
    </section>
    }), 300)
  }

  render () {
    if (!this.state) {
      return <span />
    } else {
      return this.state.map
    }
  }

Answer 1

第二次编辑的解决方案是清除 componentWillUnmount() 函数中的 setTimeout() 调用。

卸载组件时，您总是必须清除间隔和超时。

componentDidMount () {
    this.setState({map: null})
    this.timeout = setTimeout(() => this.setState({
      map: <section onloadstyle={{height: '300px'}}>
      <GoogleMapLoader
        containerElement={
          <div
            {...this.props}
            style={{
              height: '300px',
              width: '100%'
            }}
          />
        }
        googleMapElement={
          <GoogleMap
            ref={(map) => console.log(map)}
            defaultZoom={15}
            defaultCenter={this.props.coordinates}>
            {this.props.markers.map((marker, index) => {
              return (
                <Marker key={index} {...marker} />
              )
            })}
          </GoogleMap>
        }
      />
    </section>
    }), 300)
  }

  componentWillUnmount () {
    clearTimeout(this.timeout)
  }

  render () {
    if (!this.state) {
      return <span />
    } else {
      return this.state.map
    }
  }

这个解决方案不是一个好的解决方案，并且不符合react-redux工作流程。但它确实有效。